Menubar

Persistent application menu bar (File, Edit, View ...). Each top-level item opens a DropdownMenu-style panel. Use for desktop-app-style UIs.

Checkbox items

MenubarCheckboxItem toggles a boolean with v-model inside a menu.

Usage

Import the parts you need from the component's folder.

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarLabel,
  MenubarSeparator,
  MenubarShortcut,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from "@/components/ui/menubar";

Radio group

MenubarRadioGroup binds one-of-many selection with v-model.

Submenu

MenubarSub nests a second menu behind a submenu trigger that opens on hover.

With icons

A leading icon before each MenubarItem, with a label and separators.

API Reference

Menubar

Prop	Type	Default	Description
`modelValue`	`string`	—	Open menu value. Supports v-model.

Event	Description
`update:modelValue`	Fires when the active top-level menu changes.

MenubarMenu / MenubarTrigger

Prop	Type	Default	Description
`value`	`string`	—	(MenubarMenu) Identifier for this menu. Trigger opens its panel.

MenubarContent

Prop	Type	Default	Description
`class`	`string`	—	Extra classes. Forwards positioning props to reka-ui MenubarContent.

MenubarItem

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Block selection.
`inset`	`boolean`	`false`	Extra left padding to align with icon items.

Event	Description
`select`	Fires when the item is chosen.

MenubarCheckboxItem / MenubarRadioItem

Prop	Type	Default	Description
`modelValue`	`boolean \| string`	—	Item state. Supports v-model.

Event	Description
`update:modelValue`	Fires when the checkbox toggles or the radio value changes.

MenubarSub / MenubarSubTrigger / MenubarLabel

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Align SubTrigger or Label with icon items. Submenu opens on hover or right-arrow.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`←`	Moves focus to the previous top-level menu trigger.
`→`	Moves focus to the next top-level menu trigger.
`↑`	Moves to the previous item within an open menu.
`↓`	Opens the focused menu, or moves to the next item within an open menu.
`Enter`	Opens a menu or activates the focused item.
`Space`	Opens a menu or activates the focused item.
`Esc`	Closes the open menu and returns focus to its trigger.

Uses role=menubar with a roving tabindex across the top-level triggers.
Right/left arrows step into and out of submenus while a menu is open.

Mega Menu Navigation Menu