Menubar

A horizontal or vertical set of application command menus.

Preview

Design guidance

Use a menubar for persistent application commands. Keep each menu focused and let the bar own keyboard navigation. Provide a meaningful aria-label. Use the vertical orientation only when the surrounding layout calls for a vertical command lane.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/menubar.json

Basic usage

Menubar owns the command bar and keyboard movement. Each menu uses the canonical DropdownMenu parts for its popup and items.

123456789101112131415import { Menubar } from "@/components/ui/menubar";
import { DropdownMenu } from "@/components/ui/dropdown-menu";

<Menubar aria-label="Document commands">
<DropdownMenu.Root>
  <DropdownMenu.Trigger>File</DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Positioner>
      <DropdownMenu.Popup aria-label="File commands">
        <DropdownMenu.Item>New document</DropdownMenu.Item>
      </DropdownMenu.Popup>
    </DropdownMenu.Positioner>
  </DropdownMenu.Portal>
</DropdownMenu.Root>
</Menubar>

Structures

Menubar is the behavior container. Each child DropdownMenu.Root contributes one top-level trigger and its own portal, positioner and popup. The dropdown owns menu item semantics; Menubar owns orientation and roving focus across triggers.

Examples

Open each command menu to use its actions and preferences. Shortcut labels describe caller-owned bindings.

Document export

Export downloads Markdown or plain text. Format keeps an exclusive choice for Markdown, plain text or HTML; Download selected format uses that choice. Share copies a link.

Edit commands

Edit groups commands with shortcuts and unavailable history actions. Clipboard copies Markdown or plain text through the browser clipboard API.

View preferences

Outline and Word count are independent checked preferences. Text size is an exclusive choice; selected items use the same trailing checkmark without a background fill.

Disabled menu

The complete Workspace, Members and Settings bar is disabled.

AI review results

Review copies a summary or action items from caller-owned results. Transform copies text in another case. Export downloads notes; Stop generation stays disabled when no generation is running.

Vertical orientation

Workspace, Members and Settings form a vertical command lane with real documentation destinations and the matching keyboard axis.

API reference

Menubar forwards the installed Base UI Menubar props. Its default orientation is horizontal; vertical changes the roving focus axis. Use DropdownMenu public parts for each menu and its content.

Menubar properties
Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`horizontal`	Sets the command lane and keyboard movement axis.
`disabled`	`boolean`	`false`	Disables the whole menubar.
`loopFocus`	`boolean`	`true`	Loops roving focus at the end of the lane.
`modal`	`boolean`	`true`	Controls modal menu behavior.

See the Base UI Menubar API and Dropdown Menu API for inherited props.