Menubar

A visually persistent menu common in desktop applications.

disabled

#Installation

bunx --bun barefoot add menubar

#Usage

1import {2  Menubar,3  MenubarMenu,4  MenubarTrigger,5  MenubarContent,6  MenubarItem,7  MenubarSeparator,8  MenubarShortcut,9} from '@/components/ui/menubar'

#Examples

#Basic

1"use client"23import {4  Menubar,5  MenubarMenu,6  MenubarTrigger,7  MenubarContent,8  MenubarItem,9  MenubarSeparator,10  MenubarShortcut,11} from '@/components/ui/menubar'1213function BasicMenubar() {14  return (15    <Menubar>16      <MenubarMenu value="file">17        <MenubarTrigger>File</MenubarTrigger>18        <MenubarContent>19          <MenubarItem>20            <span>New Tab</span>21            <MenubarShortcut>⌘T</MenubarShortcut>22          </MenubarItem>23          <MenubarItem>24            <span>New Window</span>25          </MenubarItem>26          <MenubarSeparator />27          <MenubarItem>28            <span>Print</span>29            <MenubarShortcut>⌘P</MenubarShortcut>30          </MenubarItem>31        </MenubarContent>32      </MenubarMenu>33      <MenubarMenu value="edit">34        <MenubarTrigger>Edit</MenubarTrigger>35        <MenubarContent>36          <MenubarItem>37            <span>Undo</span>38            <MenubarShortcut>⌘Z</MenubarShortcut>39          </MenubarItem>40          <MenubarItem>41            <span>Redo</span>42            <MenubarShortcut>⇧⌘Z</MenubarShortcut>43          </MenubarItem>44          <MenubarSeparator />45          <MenubarItem><span>Cut</span></MenubarItem>46          <MenubarItem><span>Copy</span></MenubarItem>47          <MenubarItem><span>Paste</span></MenubarItem>48        </MenubarContent>49      </MenubarMenu>50    </Menubar>51  )52}

#Application

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Menubar,6  MenubarMenu,7  MenubarTrigger,8  MenubarContent,9  MenubarItem,10  MenubarCheckboxItem,11  MenubarRadioGroup,12  MenubarRadioItem,13  MenubarSub,14  MenubarSubTrigger,15  MenubarSubContent,16  MenubarSeparator,17  MenubarShortcut,18} from '@/components/ui/menubar'1920function AppMenubar() {21  const [showBookmarks, setShowBookmarks] = createSignal(true)22  const [showFullUrls, setShowFullUrls] = createSignal(false)23  const [profile, setProfile] = createSignal('benoit')2425  return (26    <Menubar>27      <MenubarMenu value="file">28        <MenubarTrigger>File</MenubarTrigger>29        <MenubarContent>30          <MenubarItem>31            <span>New Tab</span>32            <MenubarShortcut>⌘T</MenubarShortcut>33          </MenubarItem>34          <MenubarItem>35            <span>New Window</span>36            <MenubarShortcut>⌘N</MenubarShortcut>37          </MenubarItem>38          <MenubarItem disabled={true}>39            <span>New Incognito Window</span>40          </MenubarItem>41          <MenubarSeparator />42          <MenubarSub>43            <MenubarSubTrigger>44              <span>Share</span>45            </MenubarSubTrigger>46            <MenubarSubContent>47              <MenubarItem><span>Email</span></MenubarItem>48              <MenubarItem><span>Messages</span></MenubarItem>49              <MenubarItem><span>Notes</span></MenubarItem>50            </MenubarSubContent>51          </MenubarSub>52          <MenubarSeparator />53          <MenubarItem>54            <span>Print...</span>55            <MenubarShortcut>⌘P</MenubarShortcut>56          </MenubarItem>57        </MenubarContent>58      </MenubarMenu>5960      <MenubarMenu value="view">61        <MenubarTrigger>View</MenubarTrigger>62        <MenubarContent>63          <MenubarCheckboxItem64            checked={showBookmarks()}65            onCheckedChange={setShowBookmarks}66          >67            <span>Always Show Bookmarks Bar</span>68          </MenubarCheckboxItem>69          <MenubarCheckboxItem70            checked={showFullUrls()}71            onCheckedChange={setShowFullUrls}72          >73            <span>Always Show Full URLs</span>74          </MenubarCheckboxItem>75        </MenubarContent>76      </MenubarMenu>7778      <MenubarMenu value="profiles">79        <MenubarTrigger>Profiles</MenubarTrigger>80        <MenubarContent>81          <MenubarRadioGroup82            value={profile()}83            onValueChange={setProfile}84          >85            <MenubarRadioItem value="andy">86              <span>Andy</span>87            </MenubarRadioItem>88            <MenubarRadioItem value="benoit">89              <span>Benoit</span>90            </MenubarRadioItem>91            <MenubarRadioItem value="luis">92              <span>Luis</span>93            </MenubarRadioItem>94          </MenubarRadioGroup>95        </MenubarContent>96      </MenubarMenu>97    </Menubar>98  )99}

#Accessibility

Roving Hover - When one menu is open, hovering another trigger opens it
Keyboard Navigation - ArrowLeft/Right navigates between menus, ArrowDown/Up within menus
Submenu Support - Nested submenus with hover and keyboard navigation
ARIA - Triggers use aria-haspopup, aria-expanded; Items use appropriate roles (menuitem, menuitemcheckbox, menuitemradio)
Disabled State - aria-disabled on disabled items, skipped in keyboard navigation

#API Reference

Menubar

Prop	Type	Default	Description
class	string	-	Additional CSS classes for the menubar container.

MenubarMenu

Prop	Type	Default	Description
value	string	-	Unique identifier for this menu. Auto-generated if not provided.

MenubarTrigger

Prop	Type	Default	Description
children	Child	-	Trigger label text.

MenubarContent

Prop	Type	Default	Description
align	'start' \| 'end'	'start'	Alignment relative to the trigger element.

MenubarItem

Prop	Type	Default	Description
disabled	boolean	false	Whether the item is disabled.
onSelect	() => void	-	Callback when the item is selected. Menu auto-closes after selection.
variant	'default' \| 'destructive'	'default'	Visual variant. Use "destructive" for dangerous actions.

MenubarCheckboxItem

Prop	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked.
onCheckedChange	(checked: boolean) => void	-	Callback when checked state changes. Menu stays open.
disabled	boolean	false	Whether the item is disabled.

MenubarRadioGroup

Prop	Type	Default	Description
value	string	-	Currently selected value.
onValueChange	(value: string) => void	-	Callback when value changes.

MenubarRadioItem

Prop	Type	Default	Description
value	string	-	Value for this radio item.
disabled	boolean	false	Whether the item is disabled.

MenubarSub

Submenu container. Manages sub-open state internally. Wrap SubTrigger and SubContent.

MenubarSubTrigger

Prop	Type	Default	Description
disabled	boolean	false	Whether the sub trigger is disabled.

MenubarSubContent

Content container for submenu items. Positioned to the right of the trigger.

MenubarLabel

Section label inside the menu.

MenubarSeparator

Visual separator between menu item groups.

MenubarShortcut

Prop	Type	Default	Description
children	Child	-	The keyboard shortcut text (e.g., "⌘T").