Menubar

Navigation

Horizontal menu bar implementing nested dropdown menus with keyboard navigation, ARIA menubar pattern, and collision detection

Menubar

Application-style menubar for desktop-like navigation with support for submenus, shortcuts, checkboxes, radio groups and multiple visual variants.

Basic menubar

Start with a Menubar containing one or more MenubarMenu groups. Each group has a MenubarTrigger and a MenubarContent with MenubarItem children.

Appearance variants

Use the variant prop to change the surface style of the menubar. Common options include default, bordered, filled and ghost.

Default

Bordered

Filled

Ghost

Color variants

In addition to surface style, Menubar supports color variants for brand and semantic emphasis, such as primary, success, warning, danger, purple and cyan.

Primary

Success

Warning

Danger

Purple

Cyan

Sizes

The size prop controls vertical padding and font size of items. Use sm for dense layouts and lg for more spacious menubars.

Small

Medium (default)

Large

Extras

Combine shortcuts, nested submenus, checkboxes and radio groups to build more realistic application menubars.

Shortcuts & disabled items

Nested submenus

Checkbox & radio groups

Complete menubar

A more complete example combining multiple menus, submenus, shortcuts, checkboxes and radio groups in a single menubar.

App-style menubar

Usage Guidelines

When to Use

  • Application toolbars
  • Desktop-style menus
  • Multi-level navigation

Accessibility

  • Full keyboard navigation
  • ARIA menubar pattern
  • Focus management on open/close

Performance

  • Lazy submenu rendering
  • Event delegation for handlers

Common Mistakes

  • Deeply nested menus hard to navigate
  • No keyboard shortcuts

Frequently Asked Questions

Menubar is a horizontal menu with nested dropdowns, commonly used for application toolbars like File/Edit/View menus.
Yes, Menubar implements full ARIA menubar pattern with arrow key navigation.

View on GitHub

See the full source code on GitHub

Related Components

View all
AppBar

Application bar with scroll effects, elevation changes, and fixed/sticky positioning

BottomNavigation

Mobile bottom navigation bar with icon labels and active state indicators

Breadcrumb

Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks

Link

Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration

Previous

List

Next

NativeSelect