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/radix/menubar.json

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

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

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

Install the following dependencies:

bun add radix-ui lucide-react

npm install radix-ui lucide-react

pnpm add radix-ui lucide-react

yarn add radix-ui lucide-react

Copy and paste the following code into your project.

components/ui/menubar.tsx

"use client";

import { CheckIcon, ChevronRightIcon } from "lucide-react";
import { Menubar as MenubarPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";

export const Menubar = (
  props: React.ComponentProps<typeof MenubarPrimitive.Root>
) => {
  const { className, ...rest } = props;

  return (
    <MenubarPrimitive.Root
      className={cn("cn-menubar flex items-center", className)}
      data-slot="menubar"
      {...rest}
    />

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

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar"

MenubarMenu

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

children?React.ReactNode

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

AttributeType

data-slot"menubar-menu"

MenubarGroup

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

AttributeType

data-slot"menubar-group"

MenubarPortal

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

AttributeType

data-slot"menubar-portal"

MenubarRadioGroup

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

AttributeType

data-slot"menubar-radio-group"

MenubarTrigger

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-trigger"

MenubarContent

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-content"

CSS variableType

--radix-menubar-content-transform-originstring

MenubarItem

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-item"

data-inset?string

data-variant?string

MenubarCheckboxItem

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-checkbox-item"

data-inset?string

MenubarRadioItem

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-radio-item"

data-inset?string

MenubarLabel

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-label"

data-inset?string

MenubarSeparator

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-separator"

MenubarShortcut

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-shortcut"

MenubarSub

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

openboolean): void

children?React.ReactNode

defaultOpen?boolean

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

AttributeType

data-slot"menubar-sub"

MenubarSubTrigger

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-sub-trigger"

data-inset?string

MenubarSubContent

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

dir?RovingFocusGroupProps["dir"]

loop?RovingFocusGroupProps["loop"]

asChild?boolean

className?string

AttributeType

data-slot"menubar-sub-content"

CSS variableType

--radix-menubar-content-transform-originstring