Chapter 28: Menubar

Core Idea

A one-part horizontal bar that coordinates multiple Menu.Root children — cross-menu arrow-key navigation (moving from one top-level menu to the adjacent one) and shared modality, the desktop-app "File / Edit / View" pattern.

Key Concepts

• Anatomy: Menubar wraps multiple full Menu.Root trees directly — Menubar itself has no other sub-parts; all menu behavior is plain Menu (ch027).
• Cross-menu navigation: arrow keys move focus between adjacent top-level menus in the bar, not just within one menu's items — this coordination is Menubar's entire value-add over placing several unrelated Menu.Roots side by side.
• modal: whether opening one menu in the bar is modal (blocks outside interaction) — data-modal reflects this on the root element.

Reference Tables

Part	Notable props	Notable data attributes
Menubar	loopFocus, modal, disabled, orientation	data-orientation, data-has-submenu-open, data-modal

Key Takeaways

1. Use Menubar (not several independent Menu.Roots) the moment cross-menu arrow-key navigation is a requirement — that coordination doesn't happen automatically without the wrapper.
2. Each child menu keeps its full Menu API (submenus, radio/checkbox items, Viewport transitions) — Menubar only adds the bar-level orchestration.

Connects To

• ch027 (Menu): full API for every part rendered inside each Menubar entry.