Menubar Component

Horizontal menu bar with dropdown menus, submenus, checkboxes, and radio groups for complex navigation.

Basic Menubar

Application-style menu bar with multiple menu items

Menu Items with Icons

Add icons to menu items for better visual recognition

Nested Submenus

Create hierarchical menu structures with submenus

Checkbox Items

Toggle options with checkbox menu items

Show Bookmarks: Yes

Show Full URLs: No

Radio Group Items

Single selection from a group of options

Selected Profile: andy

Complete Example

Full-featured menubar with all component types

Code Examples

How to use the Menubar component

Basic Usage

import {
  Menubar,
  MenubarMenu,
  MenubarItem,
  MenubarSeparator,
} from '@/components/ui/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

import { MenubarSub } from '@/components/ui/menubar'

<MenubarMenu id="file" trigger="File">
  <MenubarSub trigger="Share">
    <MenubarItem>Email Link</MenubarItem>
    <MenubarItem>Messages</MenubarItem>
  </MenubarSub>
</MenubarMenu>

With Checkboxes

import { MenubarCheckboxItem } from '@/components/ui/menubar'

const [checked, setChecked] = useState(false)

<MenubarMenu id="view" trigger="View">
  <MenubarCheckboxItem
    checked={checked}
    onCheckedChange={setChecked}
  >
    Show Toolbar
  </MenubarCheckboxItem>
</MenubarMenu>

With Radio Groups

import {
  MenubarRadioGroup,
  MenubarRadioItem,
} from '@/components/ui/menubar'

const [value, setValue] = useState('option1')

<MenubarMenu id="options" trigger="Options">
  <MenubarRadioGroup value={value} onValueChange={setValue}>
    <MenubarRadioItem value="option1">Option 1</MenubarRadioItem>
    <MenubarRadioItem value="option2">Option 2</MenubarRadioItem>
    <MenubarRadioItem value="option3">Option 3</MenubarRadioItem>
  </MenubarRadioGroup>
</MenubarMenu>

API Reference

Component props and their types

Menubar

Prop	Type	Description
children	ReactNode	Menu items to display

MenubarMenu

Prop	Type	Description
id	string	Unique identifier for the menu
trigger	ReactNode	Button content
children	ReactNode	Menu items

MenubarItem

Prop	Type	Default	Description
onClick	function	-	Click handler
disabled	boolean	`false`	Disable interaction
shortcut	string	-	Keyboard shortcut label
icon	ReactNode	-	Icon before text

Accessibility Features

Built-in WCAG 2.2 AA compliance

✓ARIA roles: Proper menubar, menu, and menuitem roles
✓Keyboard navigation: Arrow keys, Enter, and Escape support
✓Focus management: Clear focus states and proper tab order
✓State indicators: aria-checked for checkbox and radio items
✓Disabled state: Proper disabled styling and interaction prevention
✓Click outside: Automatically closes menus when clicking outside