Menubar

A desktop-style bar of menus that stays open as you move across it.

Application menubar

Open one menu, then hover across the bar or press Left and Right: the open menu follows. Submenus, checkbox and radio items, shortcuts and disabled rows are the shared menu parts.

selected: none · bookmarks: false · profile: benoit

Code

<Menubar>
  <MenubarMenu label="File">
    <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
    <MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
    <MenubarItem disabled>New Incognito Window</MenubarItem>
    <MenubarSeparator />
    <MenubarSub label="Share">
      <MenubarItem>Email link</MenubarItem>
      <MenubarItem>Messages</MenubarItem>
      <MenubarItem>Notes</MenubarItem>
    </MenubarSub>
    <MenubarSeparator />
    <MenubarItem>Print... <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
  </MenubarMenu>
  <MenubarMenu label="Edit">...</MenubarMenu>
  <MenubarMenu label="View">
    <MenubarCheckboxItem checked={view.bookmarks}>Always Show Bookmarks Bar</MenubarCheckboxItem>
    <MenubarCheckboxItem checked={view.urls}>Always Show Full URLs</MenubarCheckboxItem>
    <MenubarSeparator />
    <MenubarItem inset>Reload <MenubarShortcut>⌘R</MenubarShortcut></MenubarItem>
    <MenubarItem inset disabled>Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut></MenubarItem>
  </MenubarMenu>
  <MenubarMenu label="Profiles">
    <MenubarRadioGroup value={view.profile}>
      <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
      <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
      <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
    </MenubarRadioGroup>
    <MenubarSeparator />
    <MenubarItem inset>Edit...</MenubarItem>
  </MenubarMenu>
</Menubar>

Usage

import {
  Menubar, MenubarMenu, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem,
  MenubarLabel, MenubarGroup, MenubarSeparator, MenubarShortcut, MenubarSub,
} from "@elements/ui/menubar";

<Menubar>
  <MenubarMenu label="File">
    <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
    <MenubarItem disabled>New Incognito Window</MenubarItem>
    <MenubarSeparator />
    <MenubarSub label="Share">
      <MenubarItem>Email link</MenubarItem>
    </MenubarSub>
  </MenubarMenu>
  <MenubarMenu label="View">
    <MenubarCheckboxItem checked={view.bookmarks}>Always Show Bookmarks Bar</MenubarCheckboxItem>
  </MenubarMenu>
  <MenubarMenu label="Profiles">
    <MenubarRadioGroup value={view.profile}>
      <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
      <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarMenu>
</Menubar>

Examples

Controlled, loop, disabled

value is two-way and names the open menu. Left and Right wrap from the last menu to the first. The Window menu draws an arrow. A disabled menu's trigger stays reachable but does not open.

value: none · no changes

Code

<Menubar value={state.menu} onValueChange={(v) => log(v)}>
  <MenubarMenu value="file" label="File">...</MenubarMenu>
  <MenubarMenu value="edit" label="Edit">...</MenubarMenu>
  <MenubarMenu value="help" label="Help" disabled>...</MenubarMenu>
  <MenubarMenu value="window" label="Window" arrow>...</MenubarMenu>
</Menubar>

<Button onclick={() => state.menu = "edit"}>Open Edit</Button>

Menu loop

loop on a MenubarMenu wraps ArrowDown from its last item to the first and ArrowUp from the first to the last, inside that menu. loop={false} on the Menubar stops Left and Right at the first and last trigger instead of wrapping.

Code

<Menubar loop={false}>
  <MenubarMenu label="Recent" loop>
    <MenubarItem>report.pdf</MenubarItem>
    <MenubarItem>budget.xlsx</MenubarItem>
    <MenubarItem>notes.md</MenubarItem>
  </MenubarMenu>
  <MenubarMenu label="Shared">
    <MenubarItem>roadmap.md</MenubarItem>
  </MenubarMenu>
</Menubar>

Modal

modal makes each open menu modal: the page does not scroll and ignores the pointer until the menu closes, while the bar stays usable, so hovering another trigger still switches menus. By default a menubar's menus are not modal.

Code

<Menubar modal>
  <MenubarMenu label="File">...</MenubarMenu>
  <MenubarMenu label="Edit">...</MenubarMenu>
</Menubar>

Backdrop and placement

backdrop dims the page under the open menu, and a press on it closes the menu. anchor places a menu against another element than its trigger: the View menu opens under the whole toolbar. positionMethod=absolute places the Window menu in page coordinates, and disableAnchorTracking places it once when it opens.

Code

<div id="toolbar">
  <Menubar>
    <MenubarMenu label="File" backdrop>...</MenubarMenu>
    <MenubarMenu label="View" anchor="#toolbar">...</MenubarMenu>
    <MenubarMenu label="Window" positionMethod="absolute" disableAnchorTracking>...</MenubarMenu>
  </Menubar>
</div>

Vertical, icons, disabled bar

orientation=vertical stacks the triggers: Up and Down move between them and the inline-end arrow opens a menu beside the bar. Items carry icons. disabled turns off every menu in the bar.

Code

<Menubar orientation="vertical" label="Tools">
  <MenubarMenu label="File">
    <MenubarItem><Icon name="file" /> New File <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
    <MenubarItem><Icon name="download" /> Download</MenubarItem>
  </MenubarMenu>
  <MenubarMenu label="Edit">
    <MenubarItem><Icon name="copy" /> Copy <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
    <MenubarItem><Icon name="pencil" /> Rename</MenubarItem>
    <MenubarSeparator />
    <MenubarItem variant="destructive"><Icon name="trash" /> Delete</MenubarItem>
  </MenubarMenu>
</Menubar>

<Menubar disabled>...</Menubar>

Editor menubar

The APG editor example: radio and checkbox items in the menus and in a submenu of the bar style the text below. Space toggles a checkbox or checks a radio item. The Size submenu sets closeParentOnEsc={false}: Escape closes only it and returns to its row, as APG does.

The quick brown fox jumps over the lazy dog.

font: sans · size: medium · bold: false · italic: false · align: start

Code

<Menubar label="Text formatting">
  <MenubarMenu label="Font">
    <MenubarRadioGroup value={doc.font}>
      <MenubarRadioItem value="sans">Sans-serif</MenubarRadioItem>
      <MenubarRadioItem value="mono">Monospace</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarMenu>
  <MenubarMenu label="Format">
    <MenubarCheckboxItem checked={doc.bold}>Bold</MenubarCheckboxItem>
    <MenubarCheckboxItem checked={doc.italic}>Italic</MenubarCheckboxItem>
    <MenubarSeparator />
    <MenubarSub label="Size" closeParentOnEsc={false}>
      <MenubarRadioGroup value={doc.size}>
        <MenubarRadioItem value="small">Small</MenubarRadioItem>
        <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
        <MenubarRadioItem value="large">Large</MenubarRadioItem>
      </MenubarRadioGroup>
    </MenubarSub>
  </MenubarMenu>
  <MenubarMenu label="Align">
    <MenubarRadioGroup value={doc.align}>
      <MenubarRadioItem value="start">Left</MenubarRadioItem>
      <MenubarRadioItem value="center">Center</MenubarRadioItem>
      <MenubarRadioItem value="end">Right</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarMenu>
</Menubar>

Right to left

Under dir=rtl the bar runs right to left: ArrowLeft moves to the next menu and submenus open to the left.

Code

<Menubar dir="rtl">
  <MenubarMenu label="ملف">...</MenubarMenu>
  <MenubarMenu label="تحرير">...</MenubarMenu>
</Menubar>

Reference Menubar in the manual Every part, attribute, slot, key and data attribute.