Command Palette

Search for a command to run...

Menubar

shadcn/ui

Displays a menu bar that can be used to create a native application menu.

import {	Menubar,	MenubarContent,	MenubarItem,	MenubarMenu,	MenubarSeparator,	MenubarShortcut,	MenubarTrigger,} from "@/registry/optics/menubar";<Menubar>	<MenubarMenu>		<MenubarTrigger>File</MenubarTrigger>		<MenubarContent>			<MenubarItem>				New Tab <MenubarShortcut>⌘T</MenubarShortcut>			</MenubarItem>			<MenubarItem>				New Window <MenubarShortcut>⌘N</MenubarShortcut>			</MenubarItem>			<MenubarSeparator />			<MenubarItem>				Share <MenubarShortcut>⌘⇧S</MenubarShortcut>			</MenubarItem>		</MenubarContent>	</MenubarMenu></Menubar>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/menubar.json

Props

<Menubar />
Name
Type
className
string

<MenubarMenu />
Name
Type
No specific props. Accepts standard Radix Menubar.Menu props.
<MenubarTrigger />
Name
Type
className
string
<MenubarContent />
Name
Type
className
string
align
"start" | "center" | "end" (default: "start")
alignOffset
number (default: -4)
sideOffset
number (default: 8)
<MenubarItem />
Name
Type
className
string
inset
boolean
variant
"default" | "destructive" (default: "default")
disabled
boolean
<MenubarCheckboxItem />
Name
Type
className
string
checked
boolean
children
React.ReactNode
<MenubarRadioItem />
Name
Type
className
string
children
React.ReactNode
<MenubarLabel />
Name
Type
className
string
inset
boolean
<MenubarSeparator />
Name
Type
className
string
<MenubarShortcut />
Name
Type
className
string
<MenubarSub />
Name
Type
No specific props. Accepts standard Radix Menubar.Sub props.
<MenubarSubTrigger />
Name
Type
className
string
inset
boolean
children
React.ReactNode
<MenubarSubContent />
Name
Type
className
string
sideOffset
number (default: 2)
align
"start" | "center" | "end" (default: "start")
alignOffset
number (default: -4)
<MenubarGroup />
Name
Type
No specific props. Accepts standard Radix Menubar.Group props.
<MenubarRadioGroup />
Name
Type
No specific props. Accepts standard Radix Menubar.RadioGroup props.
<MenubarPortal />
Name
Type
No specific props. Accepts standard Radix Menubar.Portal props.
LabelMulti Select