Menubar
Navigation
Overlay
Horizontal menu bar with dropdown menus, submenus, checkboxes, and radio groups for complex navigation.
Preview
Application-style menu bar with multiple menu items
With Icons
Add icons to menu items for better visual recognition
With Submenus
Create hierarchical menu structures with submenus
With Checkboxes
Toggle options with checkbox menu items
Show Bookmarks: Yes
Show Full URLs: No
With Radio Groups
Single selection from a group of options
Selected Profile: andy
Props
Component API reference
MenubarMenu
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Unique identifier for the menu |
trigger* | ReactNode | — | Button content |
children* | ReactNode | — | Menu items |
MenubarItem
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | () => void | — | Click handler |
disabled | boolean | false | Disable interaction |
shortcut | string | — | Keyboard shortcut label |
icon | ReactNode | — | Icon before text |
MenubarCheckboxItem
| Prop | Type | Default | Description |
|---|---|---|---|
checked* | boolean | — | Checked state |
onCheckedChange | (checked: boolean) => void | — | Change callback |
MenubarRadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Selected value |
onValueChange | (value: string) => void | — | Change callback |
Usage
Import and implementation examples
import {
Menubar,
MenubarMenu,
MenubarItem,
MenubarSeparator,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSub,
MenubarLabel,
} from '@/components/ui/menubar'
// Basic menubar
<Menubar>
<MenubarMenu id="file" trigger="File">
<MenubarItem shortcut="⌘N">New Tab</MenubarItem>
<MenubarItem shortcut="⌘⇧N">New Window</MenubarItem>
<MenubarSeparator />
<MenubarItem shortcut="⌘P">Print</MenubarItem>
</MenubarMenu>
<MenubarMenu id="edit" trigger="Edit">
<MenubarItem shortcut="⌘Z">Undo</MenubarItem>
<MenubarItem shortcut="⌘⇧Z">Redo</MenubarItem>
</MenubarMenu>
</Menubar>
// With submenus
<MenubarSub trigger="Share">
<MenubarItem>Email Link</MenubarItem>
<MenubarItem>Messages</MenubarItem>
</MenubarSub>
// With checkboxes
<MenubarCheckboxItem
checked={checked}
onCheckedChange={setChecked}
>
Show Toolbar
</MenubarCheckboxItem>
// With radio groups
<MenubarRadioGroup value={value} onValueChange={setValue}>
<MenubarRadioItem value="option1">Option 1</MenubarRadioItem>
<MenubarRadioItem value="option2">Option 2</MenubarRadioItem>
</MenubarRadioGroup>Features
Built-in functionality
- Dropdown menus: Multiple menu dropdowns
- Nested submenus: Hierarchical menu structure
- Checkbox items: Toggle options on/off
- Radio groups: Single selection groups
- Keyboard shortcuts: Display shortcut hints
- Icon support: Icons in menu items
- Labels & separators: Organize menu sections
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="menubar" for containerrole="menu" for dropdown menusrole="menuitem" for itemsaria-checked for checkbox and radio itemsKeyboard Navigation
| Key | Action |
|---|---|
| Arrow Left/Right | Navigate between menus |
| Arrow Up/Down | Navigate within menu |
| Enter | Activate item |
| Escape | Close menu |
Notes
- Focus management between menus
- Click outside closes menus
- Disabled items are not focusable