Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Radix UI Base UI

Installation

Label Native Select

On This Page

Installation Usage Examples Checkbox Radio Submenu With Icons API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add menubar

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Use MenubarCheckboxItem for toggleable options.

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

import {
  Menubar,
  MenubarCheckboxItem,

import {
  Menubar,
  MenubarCheckboxItem,

import {
  Menubar,
  MenubarContent,

"use client"

import * as React from "react"

import {
  Menubar,
  MenubarContent,