Chapter 21: Menubar

Core Idea

A persistent horizontal bar of menus (like a desktop app's File/Edit/View bar) — composes multiple DropdownMenu-shaped menus under one Root that manages roving focus and active-menu state across them.

Key Concepts

• Anatomy: Root → one or more Menu (each wraps Trigger + Portal → Content with the same Item/Group/Label/CheckboxItem/RadioGroup+RadioItem/Sub/Separator/Arrow sub-parts as DropdownMenu/ContextMenu).
• Root's value/onValueChange: tracks which top-level Menu is currently active/open — lets you control which menu is open programmatically.
• loop: whether keyboard navigation between menu triggers wraps around at the ends.
• Cross-menu keyboard navigation: once one menu is open, ArrowLeft/ArrowRight moves to and opens the adjacent menu automatically — the defining desktop-menubar behavior this primitive provides "for free".

Key Takeaways

1. Reach for Menubar specifically when you need File/Edit/View-style adjacent-menu keyboard navigation — a row of independent DropdownMenus won't give you the automatic left/right menu-switching behavior.
2. Each Menu's Content still supports the full item/checkbox/radio/submenu vocabulary from DropdownMenu — nothing is lost by nesting under Menubar.
3. Same collision-aware and origin-aware CSS variables (--radix-menubar-content-transform-origin, -available-width/height) as the other menu primitives.

Connects To

• Dropdown Menu: the single-menu building block Menubar composes multiple of.
• Context Menu: shares the identical item/checkbox/radio/submenu API.