Menubar

A horizontal bar of menus, like the File / Edit / View row in a desktop app. Each MenubarMenu owns a trigger and its dropdown; the root coordinates them so only one is open at a time, arrow keys move between triggers, and typeahead jumps to a trigger by name. Built on top of Menu, so every menu inherits keyboard navigation, nested submenus, and checkbox/radio items. Use it for application-style menu bars in editors, dashboards, and tools. The root holds which menu is open; bind `v-model` (or listen to `update:modelValue`) to control or observe the active menu's value.

A single menu within the menubar, pairing one MenubarTrigger with its MenubarContent. Its `value` identifies the menu to the root so it can track which one is open; if omitted, a stable id is generated automatically.

The button in the menubar that opens its menu and anchors the content. Toggles on click, opens on Enter / Space / ArrowDown / ArrowUp, and — once any menu is open — switches to this menu on hover. Arrow keys, Home/End, and typeahead move focus between sibling triggers.

The floating surface that holds a menu's items, positioned below its MenubarTrigger. Handles focus management, typeahead, and dismissal on outside click or Escape; render it inside a MenubarPortal so it escapes overflow clipping. While open and focused, ArrowLeft / ArrowRight switch to the adjacent menubar menu (RTL-aware, loop-aware) — the core APG menubar interaction.

No props or events — renders its element and forwards attributes.

Teleports a menu's content into the document body (or a chosen target) so it renders above other content and escapes any `overflow: hidden` ancestor.

No props or events — renders its element and forwards attributes.

An optional arrow that points from a menu's content back toward its trigger. Render it inside the content; it tracks the trigger as the menu repositions.

No props or events — renders its element and forwards attributes.

A horizontal divider used to visually separate groups of items within a menu. Decorative and skipped by keyboard navigation.

No props or events — renders its element and forwards attributes.

A non-interactive heading that titles a section of a menu. It is skipped by keyboard navigation and is not selectable.

No props or events — renders its element and forwards attributes.

Groups related items within a menu so assistive tech announces them together. Pair it with a MenubarLabel to give the group an accessible name.

No props or events — renders its element and forwards attributes.

A single actionable row in a menu. Emits `select` on click or Enter/Space and closes the menu afterwards unless the event is prevented.

No props or events — renders its element and forwards attributes.

A menu item that toggles a boolean (or indeterminate) state. Bind `v-model:checked` to track the value; pair it with MenubarItemIndicator to render a check mark when active.

No props or events — renders its element and forwards attributes.

Groups MenubarRadioItems into a single-choice set. Bind `v-model` to track the selected item's value across the group.

No props or events — renders its element and forwards attributes.

One option within a MenubarRadioGroup. Selecting it sets the group's value to this item's `value`; pair it with MenubarItemIndicator to show which option is active.

No props or events — renders its element and forwards attributes.

Renders its content only when the enclosing checkbox or radio item is checked. Put a check mark or dot inside it as the selection marker.

No props or events — renders its element and forwards attributes.

Wraps a nested submenu, pairing a MenubarSubTrigger with its MenubarSubContent. Owns the submenu's open state: bind `v-model:open` to control it, set `defaultOpen` to start open in uncontrolled mode, or leave both unset to let it manage its own open state. The default slot exposes the current `open` value.

The item that opens its submenu on hover or ArrowRight and closes it on ArrowLeft. Renders like a regular item but opens MenubarSubContent instead of emitting `select`.

No props or events — renders its element and forwards attributes.

The floating surface for a submenu's items, positioned alongside its MenubarSubTrigger. Place it inside a MenubarSub. While open, ArrowRight (the "next menu" key, RTL-aware) switches to the adjacent menubar menu, matching the top-level content behaviour.

No props or events — renders its element and forwards attributes.