Menu Bar

The macOS menu bar: the app menus on the left and status items with the clock on the right.

@cupertinoui/menubarBase UI Menubar Registry JSON

"use client"

import { BatteryFullIcon, SearchIcon, WifiIcon } from "lucide-react"

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarExtra,
  MenubarExtras,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"

export default function MenubarDemo() {
  return (
    <Menubar className="w-full max-w-2xl rounded-[12px] bg-black/20">
      <MenubarMenu>
        <MenubarTrigger app>Notes</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>About Notes</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Settings… <MenubarShortcut>⌘,</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Quit Notes <MenubarShortcut>⌘Q</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Note <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Folder <MenubarShortcut>⇧⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Export as PDF…</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Show Folders</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show Note Count</MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarExtras>
        <MenubarExtra aria-label="Battery">
          <BatteryFullIcon />
        </MenubarExtra>
        <MenubarExtra aria-label="Wi-Fi">
          <WifiIcon />
        </MenubarExtra>
        <MenubarExtra aria-label="Spotlight">
          <SearchIcon />
        </MenubarExtra>
        <MenubarExtra>Mon 9:41</MenubarExtra>
      </MenubarExtras>
    </Menubar>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/menubar

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

import {
  Menubar,
  MenubarContent,
  MenubarExtra,
  MenubarExtras,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger app>Notes</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>About Notes</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarExtras>
    <MenubarExtra>Mon 9:41</MenubarExtra>
  </MenubarExtras>
</Menubar>

The menu bar is transparent and its text is white, as it sits over the wallpaper. Put it on a dark or colorful background.

API Reference

Every part forwards the props of the underlying Base UI Menubar part. The props below are the ones CupertinoUI adds or changes.

Menubar

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.

MenubarTrigger

Prop	Type	Description
`app`	`boolean`	Render the bold application name.
`className`	`string`	Extra classes, merged with the component's own.

MenubarExtras

Pushes status items and the clock to the right.

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.

MenubarExtra

A status item button.

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.