Menubar

Navigation

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Import

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger, ... } from "@/components/ui/menubar";

A desktop menubar that transforms into a mobile-friendly menu on smaller screens. On mobile, tap the menu button to reveal all options.

value—

string

The controlled value of the active menu

defaultValue—

string

The default value of the active menu

onValueChange—

(value: string) => void

Event handler for value change

looptrue

boolean

Whether keyboard navigation should loop from last to first

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the active menu
`defaultValue`	`string`	—	The default value of the active menu
`onValueChange`	`(value: string) => void`	—	Event handler for value change
`loop`	`boolean`	true	Whether keyboard navigation should loop from last to first