Components
Loading preview...
A horizontal menu bar component for navigation and actions.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/menubarimport {
MenuBar,
MenuBarMenu,
MenuBarTrigger,
MenuBarContent,
MenuBarItem,
MenuBarSeparator,
MenuBarSub,
MenuBarSubTrigger,
MenuBarSubContent
} from "@/components/ui/menubar";
import { File, Edit, Settings, Plus, Save } from "lucide-react";
export default function DemoOne() {
return(
<>
<div>
<MenuBar>
<MenuBarMenu>
<MenuBarTrigger icon={File}>File</MenuBarTrigger>
<MenuBarContent>
<MenuBarItem icon={Plus} shortcut="⌘N">
New File
</MenuBarItem>
<MenuBarItem icon={Save} shortcut="⌘S">
Save
</MenuBarItem>
</MenuBarContent>
</MenuBarMenu>
<MenuBarMenu>
<MenuBarTrigger icon={Edit}>Edit</MenuBarTrigger>
<MenuBarContent>
<MenuBarItem shortcut="⌘Z">Undo</MenuBarItem>
<MenuBarItem shortcut="⌘Y">Redo</MenuBarItem>
</MenuBarContent>
</MenuBarMenu>
<MenuBarMenu>
<MenuBarTrigger icon={Settings}>Settings</MenuBarTrigger>
<MenuBarContent>
<MenuBarSub>
<MenuBarSubTrigger>Preferences</MenuBarSubTrigger>
<MenuBarSubContent>
<MenuBarItem>Theme</MenuBarItem>
<MenuBarItem>Language</MenuBarItem>
</MenuBarSubContent>
</MenuBarSub>
</MenuBarContent>
</MenuBarMenu>
</MenuBar>
</div>
</>
);
}