shadcn.io is not affiliated with official shadcn/ui

Shadcn Menubar for React

A persistent row of menus for app commands.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/menubar.json

npx shadcn@latest add https://kit.dev/r/base/menubar.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/menubar.json

yarn shadcn@latest add https://kit.dev/r/base/menubar.json

This component depends on Dropdown Menu. Install it first if you haven't already.

Install the following dependencies:

bun add @base-ui/react lucide-react

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

Copy and paste the following code into your project.

components/ui/menubar.tsx

"use client";

import { Menu as MenuPrimitive } from "@base-ui/react/menu";
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
import { CheckIcon } from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,

Update the import paths to match your project setup.

Anatomy

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

Usage

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem value="new-tab">
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem value="new-window">New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem value="share">Share</MenubarItem>
        <MenubarItem value="print">Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.
`ArrowDown`	Move down.
`ArrowUp`	Move up.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Checkbox

Use MenubarCheckboxItem for toggleable options.

PreviewCode

Radio

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

PreviewCode

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

PreviewCode

Icons

Combine icons with labels for quick scanning.

PreviewCode

Rtl

Right-to-left menubar. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Menubar

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar"

data-scope"menu"

data-part"root"

MenubarMenu

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: MenuRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<MenuRoot.Actions | null>

children?React.ReactNode | PayloadChildRenderFunction<Payload>

closeParentOnEsc?boolean

defaultTriggerId?string | null

disabled?boolean

handle?MenuHandle<Payload>

highlightItemOnHover?boolean

loopFocus?boolean

onOpenChangeComplete?(open: boolean) → void

orientation?MenuRoot.Orientation

triggerId?string | null

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"menubar-menu"

data-scope"menu"

data-part"root"

MenubarGroup

PropType

children?React.ReactNode

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"menubar-group"

data-scope"menu"

data-part"root"

MenubarPortal

PropType

keepMounted?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"menubar-portal"

data-scope"menu"

data-part"root"

MenubarTrigger

PropType

children?React.ReactNode

closeDelay?number

delay?number

disabled?boolean

handle?MenuHandle<Payload>

openOnHover?boolean

payload?Payload

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-trigger"

data-scope"menu"

data-part"root"

MenubarContent

PropType

children?React.ReactNode

id?string

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-content"

data-scope"menu"

data-part"root"

MenubarItem

PropType

closeOnClick?boolean

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuItemState>["onClick"]

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-item"

data-scope"menu"

data-part"root"

data-inset?string

data-variant?string

MenubarCheckboxItem

div

PropType

checked?boolean

defaultChecked?boolean

onCheckedChange?(checked: boolean, eventDetails: MenuCheckboxItem.ChangeEventDetails) → void

closeOnClick?boolean

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuCheckboxItemState>["onClick"]

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-checkbox-item"

data-scope"menu"

data-part"checkbox-item"

data-inset?string

MenubarRadioGroup

PropType

value?any

defaultValue?any

onValueChange?(value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) → void

children?React.ReactNode

disabled?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"menubar-radio-group"

data-scope"menu"

data-part"root"

MenubarRadioItem

div

PropType

valueany

closeOnClick?boolean

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuRadioItemState>["onClick"]

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-radio-item"

data-scope"menu"

data-part"radio-item"

data-inset?string

MenubarLabel

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-label"

data-scope"menu"

data-part"root"

data-inset?string

MenubarSeparator

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-separator"

data-scope"menu"

data-part"root"

MenubarShortcut

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-shortcut"

data-scope"menu"

data-part"root"

MenubarSub

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: MenuSubmenuRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<MenuRoot.Actions | null>

children?React.ReactNode

closeParentOnEsc?boolean

disabled?boolean

highlightItemOnHover?boolean

loopFocus?boolean

onOpenChangeComplete?(open: boolean) → void

orientation?MenuRoot.Orientation

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"menubar-sub"

data-scope"menu"

data-part"root"

MenubarSubTrigger

PropType

closeDelay?number

delay?number

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuSubmenuTriggerState>["onClick"]

openOnHover?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-sub-trigger"

data-scope"menu"

data-part"root"

data-inset?string

MenubarSubContent

PropType

children?React.ReactNode

id?string

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"menubar-sub-content"

data-scope"menu"

data-part"root"