Menubar

v0.2.14

Documentation Under Review

Catalyst Menubar wraps Radix UI Menubar to provide a visually persistent, desktop-style menu bar with full keyboard navigation, submenus, checkbox and radio items, and Catalyst design token styling out of the box.

Installation

npm install @pmi/catalyst-menubar

import {
  MenubarRoot,
  MenubarMenu,
  MenubarTrigger,
  MenubarPortal,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarItemIndicator,
  MenubarLabel,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@pmi/catalyst-menubar';

API Reference

Menubar is a compound component built on Radix UI primitives. Each part is a direct re-export of its Radix counterpart with Catalyst's cn() utility applied for className merging.

MenubarRoot

Root container for the menu bar. Manages which menu is open.

Accepts all standard Radix Menubar Root props and forwards ref to the underlying element.

MenubarMenu

Container for a single trigger + content pair. Place multiple within MenubarRoot.

Accepts all standard Radix Menubar Menu props (value).

MenubarTrigger

Button that opens a menu when clicked or when focus moves to it via arrow keys.

Accepts all standard Radix Menubar Trigger props (disabled, className).

MenubarPortal

Portals menu content to document.body to avoid z-index stacking issues.

Accepts all standard Radix Menubar Portal props (container).

MenubarContent

Dropdown panel containing menu items. Wrap inside MenubarPortal.

Accepts all standard Radix Menubar Content props and forwards ref.

MenubarItem

A selectable menu item.

Accepts all standard Radix Menubar Item props and forwards ref.

MenubarCheckboxItem

A menu item with a toggleable checked state.

Accepts all standard Radix Menubar CheckboxItem props and forwards ref.

MenubarRadioGroup

Container for a group of radio items — only one can be selected at a time.

Accepts all standard Radix Menubar RadioGroup props (value, onValueChange).

MenubarRadioItem

A menu item with radio-button behaviour.

Accepts all standard Radix Menubar RadioItem props and forwards ref.

MenubarItemIndicator

Renders inside MenubarCheckboxItem or MenubarRadioItem when the item is checked — use for custom check/radio icons.

Accepts all standard Radix Menubar ItemIndicator props and forwards ref (forceMount, className).

MenubarSeparator

Visual divider between groups of menu items.

Accepts all standard Radix Menubar Separator props and forwards ref (className).

MenubarLabel

Non-interactive label for grouping related items.

Accepts all standard Radix Menubar Label props and forwards ref (className).

MenubarSub

Container for a nested submenu structure.

Accepts all standard Radix Menubar Sub props (open, onOpenChange, defaultOpen).

MenubarSubTrigger

Item inside a menu that opens a nested MenubarSub.

Accepts all standard Radix Menubar SubTrigger props and forwards ref.

MenubarSubContent

Dropdown panel for submenu items. Wrap inside MenubarPortal.

Accepts all standard Radix Menubar SubContent props and forwards ref.

Accessibility

Menubar is designed to meet WCAG 2.2 AA standards.

Keyboard Interactions

ARIA

• MenubarRoot receives role="menubar" from Radix.
• MenubarContent / MenubarSubContent receive role="menu".
• MenubarItem receives role="menuitem"; MenubarCheckboxItem receives role="menuitemcheckbox"; MenubarRadioItem receives role="menuitemradio".
• MenubarTrigger receives aria-haspopup="menu" and aria-expanded toggled by Radix automatically.
• aria-disabled is set on disabled triggers and items.
• Catalyst provides visual styling tokens; Radix provides all underlying ARIA semantics and focus management.
• Keyboard shortcut hints (e.g. ⌘+T) are decorative — add aria-hidden="true" to their container so they are not announced twice.

See the Radix Menubar accessibility docs for full inherited behavior.

Choosing the Right Component

Use Menubar when you need a persistent horizontal application-style menu bar. Reach for a different primitive when:

Related

• Dropdown Menu
• Context Menu
• Navigation Menu