Menubar

A row of menus, as in a desktop app, with arrow-key movement between them.

When to use

Use when: Application-style menus across the top of a tool, such as File, Edit, and View.
Avoid when: A website's main navigation; use Navigation Menu.

Installation

bunx shelf add menubar

The source lands in src/components/ui/menubar.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Menubar from "@/components/ui/menubar";

<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>File</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>New tab</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: Dropdown Menu, foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.