Menubar

A desktop-style menu bar with submenus, checkboxes, radios and shortcuts.

'use client'

import * as React from 'react'
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
  MenubarLabel,
} from '@/components/ui/menubar'

export default function MenubarDemo() {
  const [showGrid, setShowGrid] = React.useState(true)
  const [showRulers, setShowRulers] = React.useState(false)
  const [zoom, setZoom] = React.useState('100')

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New file <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Open… <MenubarShortcut>⌘O</MenubarShortcut>
          </MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Copy link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Cut <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Copy <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled>
            Paste <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
            Show grid
          </MenubarCheckboxItem>
          <MenubarCheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>
            Show rulers
          </MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarLabel>Zoom</MenubarLabel>
          <MenubarRadioGroup value={zoom} onValueChange={setZoom}>
            <MenubarRadioItem value="50">50%</MenubarRadioItem>
            <MenubarRadioItem value="100">100%</MenubarRadioItem>
            <MenubarRadioItem value="200">200%</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/menubar.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Menubar imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarShortcut,
  MenubarSeparator,
} from '@/components/ui/menubar'

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Checkbox and radio items

'use client'

import * as React from 'react'
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
  MenubarLabel,
} from '@/components/ui/menubar'

/** A text-editor style bar: toggles that stay ticked and a radio group with one choice. */
export default function MenubarFormat() {
  const [bold, setBold] = React.useState(false)
  const [italic, setItalic] = React.useState(true)
  const [align, setAlign] = React.useState('left')

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Format</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked={bold} onCheckedChange={setBold}>
            Bold <MenubarShortcut>⌘B</MenubarShortcut>
          </MenubarCheckboxItem>
          <MenubarCheckboxItem checked={italic} onCheckedChange={setItalic}>
            Italic <MenubarShortcut>⌘I</MenubarShortcut>
          </MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarLabel>Align</MenubarLabel>
          <MenubarRadioGroup value={align} onValueChange={setAlign}>
            <MenubarRadioItem value="left">Left</MenubarRadioItem>
            <MenubarRadioItem value="center">Centre</MenubarRadioItem>
            <MenubarRadioItem value="right">Right</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Insert</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Table of contents</MenubarCheckboxItem>
          <MenubarCheckboxItem>Page numbers</MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

API Reference

Name	Type	Default	Description
Menubar	div props	—	The bar. Left and Right arrows move between menus; with one open, hovering another switches to it.
MenubarMenu / MenubarTrigger / MenubarContent	component	—	One menu in the bar: its button and its popup.
MenubarItem	component	—	An action. Fires onClick; supports disabled.
MenubarCheckboxItem checked / onCheckedChange	boolean / (checked: boolean) => void	—	A toggle with a tick.
MenubarRadioGroup value / onValueChange + MenubarRadioItem value	string	—	One choice out of several.
MenubarSub / MenubarSubTrigger / MenubarSubContent	component	—	A nested submenu.
MenubarShortcut, MenubarLabel, MenubarSeparator	component	—	Shortcut hint, group heading, divider.