Menubar

Use a menubar for desktop application commands such as File, View, and Help. It is a persistent navigation surface, so it should sit in a stable location rather than appear only after a click.

FileViewHelp

Show codeCopy

Import

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@workshop1/ui/components/menubar"

Composition

Each MenubarMenu pairs one MenubarTrigger with its MenubarContent. Use MenubarLabel, MenubarSeparator, and MenubarShortcut to structure the command list. MenubarCheckboxItem and MenubarRadioGroup are useful for view preferences; keep them controlled when those preferences are persisted.

Use MenubarSub for a related group of commands. Keep the top-level row short enough to remain readable at the smallest supported desktop width.

Accessibility

The primitive provides the menubar and menu roles, focus management, Arrow key navigation, and Escape dismissal. Keep each trigger's text visible and unique. Provide an alternate responsive navigation pattern for narrow layouts instead of forcing a horizontal menubar to wrap.

Best practices

• Reserve this component for application commands, not a website's primary page navigation.
• Order commands consistently and use familiar labels such as File, View, and Help.
• Put the keyboard shortcut after the action label with MenubarShortcut.
• Separate destructive or reset actions and mark them with variant="destructive".