Menubar

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

Menubar

import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "@/components/optics/menubar";<Menubar>  <MenubarMenu>    <MenubarTrigger>      File    </MenubarTrigger>    <MenubarContent>      <MenubarItem>        New Tab{' '}        <MenubarShortcut>          ⌘T        </MenubarShortcut>      </MenubarItem>      <MenubarItem>        New Window{' '}        <MenubarShortcut>          ⌘N        </MenubarShortcut>      </MenubarItem>      <MenubarItem disabled>        New Incognito Window      </MenubarItem>      <MenubarSeparator />      <MenubarSub>        <MenubarSubTrigger>          Share        </MenubarSubTrigger>        <MenubarSubContent>          <MenubarItem>            Email link          </MenubarItem>          <MenubarItem>            Messages          </MenubarItem>          <MenubarItem>            Notes          </MenubarItem>        </MenubarSubContent>      </MenubarSub>      <MenubarSeparator />      <MenubarItem>        Print...{' '}        <MenubarShortcut>          ⌘P        </MenubarShortcut>      </MenubarItem>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>      Edit    </MenubarTrigger>    <MenubarContent>      <MenubarItem>        Undo{' '}        <MenubarShortcut>          ⌘Z        </MenubarShortcut>      </MenubarItem>      <MenubarItem>        Redo{' '}        <MenubarShortcut>          ⇧⌘Z        </MenubarShortcut>      </MenubarItem>      <MenubarSeparator />      <MenubarSub>        <MenubarSubTrigger>          Find        </MenubarSubTrigger>        <MenubarSubContent>          <MenubarItem>            Search the web          </MenubarItem>          <MenubarSeparator />          <MenubarItem>            Find...          </MenubarItem>          <MenubarItem>            Find Next          </MenubarItem>          <MenubarItem>            Find Previous          </MenubarItem>        </MenubarSubContent>      </MenubarSub>      <MenubarSeparator />      <MenubarItem>        Cut      </MenubarItem>      <MenubarItem>        Copy      </MenubarItem>      <MenubarItem>        Paste      </MenubarItem>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>      View    </MenubarTrigger>    <MenubarContent>      <MenubarCheckboxItem>        Always Show Bookmarks Bar      </MenubarCheckboxItem>      <MenubarCheckboxItem checked>        Always Show Full URLs      </MenubarCheckboxItem>      <MenubarSeparator />      <MenubarItem inset>        Reload{' '}        <MenubarShortcut>          ⌘R        </MenubarShortcut>      </MenubarItem>      <MenubarItem        disabled        inset      >        Force Reload{' '}        <MenubarShortcut>          ⇧⌘R        </MenubarShortcut>      </MenubarItem>      <MenubarSeparator />      <MenubarItem inset>        Toggle Fullscreen      </MenubarItem>      <MenubarSeparator />      <MenubarItem inset>        Hide Sidebar      </MenubarItem>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>      Profiles    </MenubarTrigger>    <MenubarContent>      <MenubarRadioGroup value="benoit">        <MenubarRadioItem value="andy">          Andy        </MenubarRadioItem>        <MenubarRadioItem value="benoit">          Benoit        </MenubarRadioItem>        <MenubarRadioItem value="Luis">          Luis        </MenubarRadioItem>      </MenubarRadioGroup>      <MenubarSeparator />      <MenubarItem inset>        Edit...      </MenubarItem>      <MenubarSeparator />      <MenubarItem inset>        Add Profile...      </MenubarItem>    </MenubarContent>  </MenubarMenu></Menubar>

import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "@/components/optics/menubar";<Menubar>  <MenubarMenu>    <MenubarTrigger>      File    </MenubarTrigger>    <MenubarContent>      <MenubarItem>        New Tab{' '}        <MenubarShortcut>          ⌘T        </MenubarShortcut>      </MenubarItem>      <MenubarItem>        New Window{' '}        <MenubarShortcut>          ⌘N        </MenubarShortcut>      </MenubarItem>      <MenubarItem disabled>        New Incognito Window      </MenubarItem>      <MenubarSeparator />      <MenubarSub>        <MenubarSubTrigger>          Share        </MenubarSubTrigger>        <MenubarSubContent>          <MenubarItem>            Email link          </MenubarItem>          <MenubarItem>            Messages          </MenubarItem>          <MenubarItem>            Notes          </MenubarItem>        </MenubarSubContent>      </MenubarSub>      <MenubarSeparator />      <MenubarItem>        Print...{' '}        <MenubarShortcut>          ⌘P        </MenubarShortcut>      </MenubarItem>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>      Edit    </MenubarTrigger>    <MenubarContent>      <MenubarItem>        Undo{' '}        <MenubarShortcut>          ⌘Z        </MenubarShortcut>      </MenubarItem>      <MenubarItem>        Redo{' '}        <MenubarShortcut>          ⇧⌘Z        </MenubarShortcut>      </MenubarItem>      <MenubarSeparator />      <MenubarSub>        <MenubarSubTrigger>          Find        </MenubarSubTrigger>        <MenubarSubContent>          <MenubarItem>            Search the web          </MenubarItem>          <MenubarSeparator />          <MenubarItem>            Find...          </MenubarItem>          <MenubarItem>            Find Next          </MenubarItem>          <MenubarItem>            Find Previous          </MenubarItem>        </MenubarSubContent>      </MenubarSub>      <MenubarSeparator />      <MenubarItem>        Cut      </MenubarItem>      <MenubarItem>        Copy      </MenubarItem>      <MenubarItem>        Paste      </MenubarItem>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>      View    </MenubarTrigger>    <MenubarContent>      <MenubarCheckboxItem>        Always Show Bookmarks Bar      </MenubarCheckboxItem>      <MenubarCheckboxItem checked>        Always Show Full URLs      </MenubarCheckboxItem>      <MenubarSeparator />      <MenubarItem inset>        Reload{' '}        <MenubarShortcut>          ⌘R        </MenubarShortcut>      </MenubarItem>      <MenubarItem        disabled        inset      >        Force Reload{' '}        <MenubarShortcut>          ⇧⌘R        </MenubarShortcut>      </MenubarItem>      <MenubarSeparator />      <MenubarItem inset>        Toggle Fullscreen      </MenubarItem>      <MenubarSeparator />      <MenubarItem inset>        Hide Sidebar      </MenubarItem>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>      Profiles    </MenubarTrigger>    <MenubarContent>      <MenubarRadioGroup value="benoit">        <MenubarRadioItem value="andy">          Andy        </MenubarRadioItem>        <MenubarRadioItem value="benoit">          Benoit        </MenubarRadioItem>        <MenubarRadioItem value="Luis">          Luis        </MenubarRadioItem>      </MenubarRadioGroup>      <MenubarSeparator />      <MenubarItem inset>        Edit...      </MenubarItem>      <MenubarSeparator />      <MenubarItem inset>        Add Profile...      </MenubarItem>    </MenubarContent>  </MenubarMenu></Menubar>

Installation

pnpm dlx shadcn@latest add @optics/menubar

Props

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
align	string(default: start)
alignOffset	number(default: -4)
sideOffset	number(default: 8)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
variant	string(default: default)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Label Multi Select

Menubar

Show Code

Installation

Props

Show LessShow More