Menubar

A menubar sets an app's top-level menus side by side, like File, Edit, and View. Once one menu is open, moving across the bar opens the next, and a highlight glides to the open menu's trigger.

For one menu opened from a button, use DropdownMenu.

Preview#

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,

Installation#

npxnpx shadcn@latest add @cubby-ui/menubar

Usage#

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/cubby-ui/menubar/menubar";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarItem />
      <MenubarSeparator />
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem />
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem />
      <MenubarSeparator />
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger />
        <MenubarSubContent>
          <MenubarItem>
            <MenubarShortcut />
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem />
        </MenubarSubContent>
      </MenubarSub>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Composition#

Menubar
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarItem
        │   └── MenubarShortcut
        ├── MenubarLinkItem
        ├── MenubarCheckboxItem
        ├── MenubarRadioGroup
        │   └── MenubarRadioItem
        ├── MenubarGroup
        │   └── MenubarGroupLabel
        ├── MenubarLabel
        ├── MenubarSeparator
        └── MenubarSub
            ├── MenubarSubTrigger
            └── MenubarSubContent

Add one MenubarMenu per top-level menu. The parts inside MenubarContent are Dropdown Menu's, under Menubar names.

Examples#

Variants#

Use variant to pick the shell the triggers sit on.

"use client";
 
import {
  Menubar,
  MenubarContent,
  MenubarItem,

Size#

Use size to match the bar's height to a Button of the same size.

"use client";
 
import {
  Menubar,
  MenubarContent,
  MenubarItem,

With Checkboxes and Switches#

Use MenubarCheckboxItem for settings and MenubarRadioGroup for one choice; set indicator="switch" on a checkbox item for a switch.

"use client";
 
import { useState } from "react";
 
import {
  Menubar,

Accessibility#

Keyboard#

Tab moves focus into and out of the bar in one stop. Arrow keys move between triggers, Down or Enter opens a menu, and Left and Right move to the next menu while one is open.

Highlight#

The highlight follows the pointer, keyboard focus, and the open menu. Focus also draws a ring, so the highlight is never the only cue. With reduced motion, it jumps instead of sliding.

API Reference#

The Menubar is built on top of Base UI's Menubar and Menu. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Menubar documentation.

Props#

Menubar#

The shell around the triggers. Wraps Base UI's Menubar.

MenubarTrigger#

Opens its menu. Wraps Base UI's Menu.Trigger.

MenubarContent#

The menu's popup, aligned to the start of its trigger. Composes Menu.Portal, Menu.Positioner, Menu.Popup, and Menu.Viewport. Props are forwarded to Menu.Popup.

Notes#

Menu parts#

MenubarItem, MenubarCheckboxItem, MenubarRadioItem, MenubarSub, and the other parts inside MenubarContent are Dropdown Menu's. See the Dropdown Menu API for their props.

Upgrading#

If you're reinstalling over an earlier version, check these changes: