Menubar
A horizontal menu bar with nested dropdown menus.
menubar-demo.app
Installation
terminal.sh
npx y2kui@latest add menubarUsage
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarTrigger,
} from "@/components/ui/menubar"
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New File</MenubarItem>
<MenubarItem>Open</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>Sub-components
| Component | Description |
|---|---|
<MenubarMenu /> | A menu within the menubar. |
<MenubarTrigger /> | The trigger button inside the menubar. |
<MenubarContent /> | The dropdown content. |
<MenubarItem /> | A clickable menu item. |
<MenubarCheckboxItem /> | A checkbox-style menu item. |
<MenubarRadioItem /> | A radio-style menu item. |
<MenubarSubTrigger /> | Opens a sub-menu. |
<MenubarSubContent /> | Sub-menu content. |
<MenubarSeparator /> | Visual divider. |
<MenubarLabel /> | Non-interactive label. |
<MenubarShortcut /> | Keyboard shortcut hint. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merges the trigger into its child. |
disabled | boolean | false | Disables the item. |
inset | boolean | false | Adds left padding for icon alignment. |