Menubar

Installation#

npx sugarcoat add menubar

Examples#

Default#

With Keyboard Shortcuts#

With Submenus#

Application Menubar#

With Checkboxes and Radio Items#

Anatomy#

<Menubar>
  <Menu>
    <Menu.Trigger>Menu Label</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Item 1</Menu.Item>
          <Menu.Item>Item 2</Menu.Item>
          <Menu.Separator />
          <Menu.Item>Item 3</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu>
  {/* More menus... */}
</Menubar>

Usage#

import { Menubar, Menu } from "@sugarcoat/ui-nxt";

<Menubar>
<Menu>
  <Menu.Trigger>File</Menu.Trigger>
  <Menu.Portal>
    <Menu.Positioner>
      <Menu.Popup>
        <Menu.Item onClick={handleNew}>New</Menu.Item>
        <Menu.Item onClick={handleOpen}>Open</Menu.Item>
        <Menu.Item onClick={handleSave}>Save</Menu.Item>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu>
</Menubar>

Props#

Menubar#

Accessibility#

• Built on Base UI Menubar for robust accessibility
• Uses proper menubar and menu ARIA roles
• Arrow keys navigate between menu items
• Left/Right arrows move between top-level menus
• Up/Down arrows navigate within a menu
• Enter/Space activates menu items
• Escape closes the current menu
• Type-ahead search to jump to items
• Focus management follows WAI-ARIA menubar pattern