Archived ui/archive/phase-3/35-menubar.md

Menubar

Application-style top menubar (File / Edit / View …). Mirrors shadcn Menubar. Built on @radix-ui/react-menubar.

Purpose

Application-style top menubar (File / Edit / View …). Mirrors shadcn Menubar. Built on @radix-ui/react-menubar.

Island model

island: true. Focus traversal between menus and open-state coordination require client JS.

Peer dependencies

  • @radix-ui/react-menubar@^1.1
  • lucide-react@^0.400

Public API

Same shape as 24-dropdown-menu and 18-context-menu — Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarLabel, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarPortal, MenubarGroup.

export const island = true

Patties adjustments

  • The whole menubar is a single island root.
  • Removes forwardRef.

Acceptance criteria

  • Arrow keys move focus across top-level triggers.
  • Opening one menu and hovering another auto-opens the next (Radix default).
  • Shortcut text aligns to the right within items.