Menubar

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

Installation

›pnpm dlx shadcn@latest add @evolphin/menubar

Usage

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>âŒ˜T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>âŒ˜N</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Type Definitions

interface MenubarProps {
  /** The value of the open menu */
  value?: string;  
MenubarProps.value?: string | undefined
The value of the open menu
  /** The default value of the open menu when uncontrolled */
  ?: string;
  /** Event handler called when the value changes */
  ?: (: string) => void;
  /** Whether to loop through menus */
  ?: boolean;
}

Examples

Default

API Reference

Prop	Type	Default	Description
`value`	`string`	-	The value of the open menu.
`defaultValue`	`string`	-	The default value of the open menu when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.
`loop`	`boolean`	`false`	Whether to loop through menus.

MenubarMenu

Prop	Type	Default	Description
`value`	`string`	-	The value of the menu.

MenubarTrigger

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

MenubarContent

Prop	Type	Default	Description
`align`	`"start" \	"center" \	"end"`
`alignOffset`	`number`	`-4`	The distance in pixels from the trigger.
`sideOffset`	`number`	`8`	The distance in pixels from the trigger.
`className`	`string`	-	Additional CSS classes

MenubarItem

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the item is disabled.
`onSelect`	`(event: Event) => void`	-	Event handler called when the item is selected.
`inset`	`boolean`	`false`	Whether to indent the item.

MenubarCheckboxItem

Prop	Type	Default	Description
`checked`	`boolean \	"indeterminate"`	-
`onCheckedChange`	`(checked: boolean) => void`	-	Event handler called when the checked state changes.

MenubarRadioGroup

Prop	Type	Default	Description
`value`	`string`	-	The value of the selected item.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.

MenubarRadioItem

Prop	Type	Default	Description
`value`	`string`	-	The value of the item.

MenubarSubTrigger

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the trigger is disabled.
`inset`	`boolean`	`false`	Whether to indent the item.

Search

Menubar

On this page