Menubar

A bar of menus for an app's top-level commands.

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@appica/ui-react/menubar'

<Menubar aria-label="Application">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New file</MenubarItem>
      <MenubarItem>Open…</MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger>Open recent</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>project-alpha</MenubarItem>
          <MenubarItem>landing-page</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>Save</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo</MenubarItem>
      <MenubarItem>Redo</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Menubar is a compound component built on Base UI's Menubar. The root is the bar that coordinates a row (or column) of menus, sharing variant, size, and orientation with all of them:

MenubarMenu — wraps one menu (a menu root under the hood). It inherits the bar's size.
MenubarTrigger — the top-level label that opens its menu. Once any menu is open, moving the pointer to a sibling trigger switches to it; arrow keys move focus along the bar.
MenubarContent — the portalled popup for that menu. In a vertical bar it opens to the side automatically.
MenubarItem — one action. Fires onClick and closes the menu by default.
MenubarGroup / MenubarGroupLabel / MenubarSeparator — structure for sectioned menus.
MenubarCheckboxItem / MenubarRadioGroup + MenubarRadioItem — stateful options with a check indicator.
MenubarLinkItem — an item that renders an <a> for navigation.
MenubarSub / MenubarSubTrigger / MenubarSubContent — a nested submenu.

Inside an item, put a leading icon on data-icon="start", and push a trailing Kbd shortcut to the edge with ms-auto.

Reach for a Menubar for the persistent command bar of an application (File / Edit / View …). For a single menu opened from one button, use a DropdownMenu; for in-page navigation with rich panels, use a Navigation Menu.

Examples

A typical desktop-style command bar — File, Edit, and View menus with keyboard shortcuts, separators, a nested "Open recent" submenu, and a disabled item.

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@appica/ui-react/menubar'
import { Kbd } from '@appica/ui-react/kbd'

export default function MenubarDefault() {
  return (
    <Menubar aria-label="Application">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New file
            <Kbd size="sm" className="ms-auto">
              ⌘N
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            Open…
            <Kbd size="sm" className="ms-auto">
              ⌘O
            </Kbd>
          </MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Open recent</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>project-alpha</MenubarItem>
              <MenubarItem>landing-page</MenubarItem>
              <MenubarItem>design-system</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Save
            <Kbd size="sm" className="ms-auto">
              ⌘S
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            Save as…
            <Kbd size="sm" className="ms-auto">
              ⇧⌘S
            </Kbd>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <Kbd size="sm" className="ms-auto">
              ⌘Z
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            Redo
            <Kbd size="sm" className="ms-auto">
              ⇧⌘Z
            </Kbd>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Cut</MenubarItem>
          <MenubarItem>Copy</MenubarItem>
          <MenubarItem>Paste</MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Zoom in</MenubarItem>
          <MenubarItem>Zoom out</MenubarItem>
          <MenubarItem>Reset zoom</MenubarItem>
          <MenubarSeparator />
          <MenubarItem disabled>Enter full screen</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Variants

variant styles the triggers: pill (default) gives each a hover/active pill, while line draws an animated underline — closer to a classic desktop menu bar.

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@appica/ui-react/menubar'

const MENUS = ['File', 'Edit', 'View']

function Menus() {
  return MENUS.map((label) => (
    <MenubarMenu key={label}>
      <MenubarTrigger>{label}</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>Action one</MenubarItem>
        <MenubarItem>Action two</MenubarItem>
        <MenubarItem>Action three</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  ))
}

export default function MenubarVariants() {
  return (
    <div className="flex flex-col items-center gap-8">
      <Menubar variant="pill" aria-label="Pill menubar">
        <Menus />
      </Menubar>
      <Menubar variant="line" aria-label="Line menubar">
        <Menus />
      </Menubar>
    </div>
  )
}

Vertical

Set orientation="vertical" to stack the menus into a sidebar. Triggers can carry a leading icon (data-icon="start"), and each menu opens to the inline-end side. Menus normally only flip to the opposite same-axis side; pass collisionAvoidance={{ fallbackAxisSide: 'end' }} so a side-opening menu can also fall back to the top/bottom axis when it doesn't fit there.

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
} from '@appica/ui-react/menubar'
import { LayoutDashboard, Folder, Users, Settings } from '@appica/icons-react'

export default function MenubarVertical() {
  return (
    <Menubar orientation="vertical" aria-label="Workspace" className="w-35">
      <MenubarMenu>
        <MenubarTrigger>
          <LayoutDashboard data-icon="start" />
          Overview
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>Summary</MenubarItem>
          <MenubarItem>Activity</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Folder data-icon="start" />
          Projects
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>All projects</MenubarItem>
          <MenubarItem>New project</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Archived</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Users data-icon="start" />
          Team
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>Members</MenubarItem>
          <MenubarItem>Invitations</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Settings data-icon="start" />
          Settings
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>General</MenubarItem>
          <MenubarItem>Billing</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Submenus

Nest a MenubarSub inside a menu with its own MenubarSubTrigger and MenubarSubContent. The sub-trigger shows a chevron and opens to the side on hover or with the arrow keys, flipping automatically near a screen edge.

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@appica/ui-react/menubar'
import { Kbd } from '@appica/ui-react/kbd'

export default function MenubarSubmenu() {
  return (
    <Menubar aria-label="Application">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New file
            <Kbd size="sm" className="ms-auto">
              ⌘N
            </Kbd>
          </MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Open recent</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>project-alpha</MenubarItem>
              <MenubarItem>landing-page</MenubarItem>
              <MenubarItem>design-system</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Clear recent</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Save
            <Kbd size="sm" className="ms-auto">
              ⌘S
            </Kbd>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>Share</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Copy link</MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Export as</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>PDF</MenubarItem>
              <MenubarItem>PNG</MenubarItem>
              <MenubarItem>SVG</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Checkbox & radio items

Menus support the same stateful items as DropdownMenu — MenubarCheckboxItem for toggles and a MenubarRadioGroup of MenubarRadioItems for a single choice, both grouped under a MenubarGroupLabel.

'use client'

import * as React from 'react'
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarGroup,
  MenubarGroupLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
} from '@appica/ui-react/menubar'

export default function MenubarSelections() {
  const [toolbar, setToolbar] = React.useState(true)
  const [sidebar, setSidebar] = React.useState(false)
  const [theme, setTheme] = React.useState('system')

  return (
    <Menubar aria-label="Editor">
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarGroupLabel>Panels</MenubarGroupLabel>
            <MenubarCheckboxItem checked={toolbar} onCheckedChange={setToolbar}>
              Toolbar
            </MenubarCheckboxItem>
            <MenubarCheckboxItem checked={sidebar} onCheckedChange={setSidebar}>
              Sidebar
            </MenubarCheckboxItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarRadioGroup value={theme} onValueChange={setTheme}>
            <MenubarGroupLabel>Theme</MenubarGroupLabel>
            <MenubarRadioItem value="light">Light</MenubarRadioItem>
            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
            <MenubarRadioItem value="system">System</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Help</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Documentation</MenubarItem>
          <MenubarItem>Keyboard shortcuts</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Leading icons

Put a leading icon on the data-icon="start" slot, before the label — it works on both a MenubarTrigger and a MenubarItem, which reserves space and aligns every row's text. Pair an item with a trailing Kbd shortcut pushed to the edge with ms-auto.

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
} from '@appica/ui-react/menubar'
import { Kbd } from '@appica/ui-react/kbd'
import {
  FileText,
  Pencil,
  Eye,
  FilePlus,
  FolderOpen,
  Download,
  CornerUpLeft,
  CornerUpRight,
  Scissors,
  Copy,
  Clipboard,
  ZoomIn,
  ZoomOut,
  Maximize,
} from '@appica/icons-react'

export default function MenubarIcons() {
  return (
    <Menubar aria-label="Application">
      <MenubarMenu>
        <MenubarTrigger>
          <FileText data-icon="start" />
          File
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <FilePlus data-icon="start" />
            New file
            <Kbd size="sm" className="ms-auto">
              ⌘N
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            <FolderOpen data-icon="start" />
            Open…
            <Kbd size="sm" className="ms-auto">
              ⌘O
            </Kbd>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Download data-icon="start" />
            Save
            <Kbd size="sm" className="ms-auto">
              ⌘S
            </Kbd>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>
          <Pencil data-icon="start" />
          Edit
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <CornerUpLeft data-icon="start" />
            Undo
          </MenubarItem>
          <MenubarItem>
            <CornerUpRight data-icon="start" />
            Redo
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Scissors data-icon="start" />
            Cut
          </MenubarItem>
          <MenubarItem>
            <Copy data-icon="start" />
            Copy
          </MenubarItem>
          <MenubarItem>
            <Clipboard data-icon="start" />
            Paste
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>
          <Eye data-icon="start" />
          View
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <ZoomIn data-icon="start" />
            Zoom in
          </MenubarItem>
          <MenubarItem>
            <ZoomOut data-icon="start" />
            Zoom out
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Maximize data-icon="start" />
            Enter full screen
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

RTL

Every Appica UI component supports right-to-left layouts out of the box. Set the dir attribute on a container (commonly your <html> element) so CSS logical properties resolve correctly, and wrap your tree in DirectionProvider so direction-aware behavior — roving focus along the bar, popup placement, and submenu direction — follows the same direction.

import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

The bar lays out from the right, arrow-key focus reverses, and popups anchor and flip accordingly. For setup details and caveats, see the RTL guide.

Scoped RTL needs the direction on the positioner

Each menu's popup portals to <body>, so its start/end alignment mirrors from the document direction (read from CSS, not from DirectionProvider) — automatic when <html dir="rtl">. If you instead scope RTL to a subtree of an LTR page, set it on the positioner so alignment still mirrors: <MenubarContent positionerProps={{ dir: 'rtl' }}>. See Floating popups in a scoped RTL region.

API reference

Menubar wraps Base UI's Menubar and composes a menu for each entry. Each part forwards every remaining prop to the matching Base UI primitive, so anything it accepts works here — the tables below list the Appica additions and the most common props. See the Base UI docs for the complete API.

Menubar

The bar. Coordinates the menus and holds the shared styling/orientation; renders a menubar element.

Prop	Type	Default	Description
`variant`	`'pill' \| 'line'`	`'pill'`	Trigger appearance — hover/active pill, or an animated underline.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Scales the triggers, popups, and items together.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Lay the bar out as a row or a column.
`modal`	`boolean`	`true`	Trap focus and block outside interaction while a menu is open.
`loopFocus`	`boolean`	`true`	Wrap arrow-key focus from the last trigger back to the first.
`disabled`	`boolean`	`false`	Disable every menu in the bar.
`className`	`string`	—	Extra classes on the bar, merged via `tailwind-merge`.

MenubarMenu

Wraps one menu in the bar. Inherits the bar's size; forwards the rest to the underlying menu root.

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of this menu.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open, eventDetails) => void`	—	Fires when this menu opens or closes.

MenubarTrigger

The top-level label that opens its menu. Inherits the bar's variant, size, and orientation.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disable just this menu.
`className`	`string`	—	Extra classes on the trigger, merged via `tailwind-merge`.

MenubarContent

The portalled popup for a menu. In a vertical bar it defaults to side="inline-end" / align="start"; in a horizontal bar it opens below the trigger. Accepts the shared floating props.

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side to open on.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment along that side.
`sideOffset`	`number`	`6`	Gap between the trigger and the popup.
`alignOffset`	`number`	—	Shift along the alignment axis.
`collisionPadding`	`number`	`5`	Minimum gap kept from the viewport edge when flipping/shifting.
`container`	`HTMLElement \| ref \| null`	—	Portal target — render the popup into a different node.
`keepMounted`	`boolean`	`false`	Keep the popup mounted in the DOM while closed.
`positionerProps`	`object`	—	Escape hatch for the positioner element (`style`, `render`, …).
`portalProps`	`object`	—	Escape hatch for the portal element (`style`, `render`, …).
`className`	`string`	—	Extra classes on the popup.

MenubarItem

One action in a menu.

Prop	Type	Default	Description
`closeOnClick`	`boolean`	`true`	Close the menu after the item is selected.
`disabled`	`boolean`	`false`	Make the item unselectable; skipped by keyboard and typeahead.
`onClick`	`(event) => void`	—	Fires when the item is selected (click or Enter/Space).
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

MenubarCheckboxItem

A toggleable item with a check indicator. Keeps the menu open on click.

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state. Pair with `onCheckedChange`.
`defaultChecked`	`boolean`	`false`	Uncontrolled initial checked state.
`onCheckedChange`	`(checked) => void`	—	Fires when the checked state changes.
`closeOnClick`	`boolean`	`false`	Close the menu when toggled.
`disabled`	`boolean`	`false`	Make the item unselectable.

MenubarRadioGroup

Wraps a set of mutually exclusive MenubarRadioItems.

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value. Pair with `onValueChange`.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onValueChange`	`(value) => void`	—	Fires when the selection changes.

MenubarRadioItem

One option in a MenubarRadioGroup. Keeps the menu open on click.

Prop	Type	Default	Description
`value`	`string`	—	The value this item selects.
`closeOnClick`	`boolean`	`false`	Close the menu when chosen.
`disabled`	`boolean`	`false`	Make the option unselectable.

MenubarLinkItem

An item that renders an <a> for navigation. Forwards every native anchor prop (href, target, rel, …).

Prop	Type	Default	Description
`href`	`string`	—	Navigation target.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

MenubarGroup

Wraps one labelled section of a menu so a MenubarGroupLabel can name it.

Prop	Type	Default	Description
`children`	`ReactNode`	—	A `MenubarGroupLabel` plus the section's items.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

MenubarGroupLabel

The visible heading for a MenubarGroup. Size-aware; must be rendered inside a MenubarGroup (or MenubarRadioGroup).

Prop	Type	Default	Description
`children`	`ReactNode`	—	The label text.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

MenubarSeparator

A thin divider between items or groups.

Prop	Type	Default	Description
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

MenubarSub

Wraps a nested submenu inside a menu.

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the submenu.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.

MenubarSubTrigger

The item that opens a submenu; renders a trailing chevron. Submenus open on hover by default.

Prop	Type	Default	Description
`openOnHover`	`boolean`	`true`	Open the submenu on hover (and on click).
`delay`	`number`	`100`	Hover-open delay in ms.
`closeDelay`	`number`	`0`	Hover-close delay in ms.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

MenubarSubContent

The submenu popup. Defaults to opening on the inline-end side; otherwise identical to MenubarContent.

Prop	Type	Default	Description
`className`	`string`	—	Extra classes on the submenu popup.

Accessibility

The bar has role="menubar"; give it an accessible name with aria-label. Triggers are menuitems with aria-haspopup, and each popup is a menu.
←/→ (or ↑/↓ when vertical) move focus between triggers; Enter / Space / ↓ open a menu; Escape closes it back to its trigger; typeahead jumps to matching items.
With a menu open, hovering a sibling trigger switches to its menu without an extra click.
disabled triggers and items are skipped by keyboard navigation.
Popup enter/exit transitions are skipped when the user prefers reduced motion.

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback

Menubar

Usage

Examples

Application menu

Variants

Vertical

Submenus

Checkbox & radio items

Leading icons

RTL

Scoped RTL needs the direction on the positioner

API reference

Menubar

MenubarMenu

MenubarTrigger

MenubarContent

MenubarItem

MenubarCheckboxItem

MenubarRadioGroup

MenubarRadioItem

MenubarLinkItem

MenubarGroup

MenubarGroupLabel

MenubarSeparator

MenubarSub

MenubarSubTrigger

MenubarSubContent

Accessibility