Default
Minimal
Sub-components
| Sub-component | Type | Description |
|---|---|---|
| Menubar | Root | Horizontal bar that contains menu triggers |
| Menubar.Menu | Component | Wraps a single top-level menu |
| Menubar.Trigger | Component | Button that opens a menu |
| Menubar.Content | Component | Popover container for items |
| Menubar.Item | Component | A single menu item |
| Menubar.CheckboxItem | Component | Item with a checkbox indicator |
| Menubar.RadioGroup | Component | Groups radio items together |
| Menubar.RadioItem | Component | Item with a radio indicator |
| Menubar.Label | Component | Non-interactive label for grouping |
| Menubar.Separator | Component | Visual separator between items |
| Menubar.Shortcut | Component | Displays a keyboard shortcut hint |
| Menubar.Sub | Component | Wraps a sub-menu trigger and content |
| Menubar.SubTrigger | Component | Item that opens a sub-menu |
| Menubar.SubContent | Component | Content for the sub-menu |
Usage
<Menubar>
<Menubar.Menu>
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>
New Tab <Menubar.Shortcut>⌘T</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Sub>
<Menubar.SubTrigger>Share</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.Item>Email Link</Menubar.Item>
</Menubar.SubContent>
</Menubar.Sub>
</Menubar.Content>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger>View</Menubar.Trigger>
<Menubar.Content>
<Menubar.CheckboxItem checked={checked} onCheckedChange={setChecked}>
Show Bookmarks
</Menubar.CheckboxItem>
<Menubar.RadioGroup value={font} onValueChange={setFont}>
<Menubar.RadioItem value="inter">Inter</Menubar.RadioItem>
</Menubar.RadioGroup>
</Menubar.Content>
</Menubar.Menu>
</Menubar>