shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/menubar.jsonnpx shadcn@latest add https://kit.dev/r/aria/menubar.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/menubar.jsonyarn shadcn@latest add https://kit.dev/r/aria/menubar.jsonInstall the following dependencies:
bun add react-aria-components tailwind-variants lucide-reactnpm install react-aria-components tailwind-variants lucide-reactpnpm add react-aria-components tailwind-variants lucide-reactyarn add react-aria-components tailwind-variants lucide-reactCopy and paste the following code into your project.
"use client";
import { CheckIcon, ChevronRightIcon } from "lucide-react";
import type React from "react";
import {
Button as ButtonPrimitive,
composeRenderProps,
Header as HeaderPrimitive,
MenuItem as MenuItemPrimitive,
type MenuItemProps as MenuItemPrimitiveProps,
Menu as MenuPrimitive,
MenuSection as MenuSectionPrimitive,
type MenuSectionProps as MenuSectionPrimitiveProps,
MenuTrigger as MenuTriggerPrimitive,
Popover as PopoverPrimitive,
Separator as SeparatorPrimitive,
SubmenuTrigger as SubmenuTriggerPrimitive,
Toolbar,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
└── MenubarContentUsage
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.
Radio
Use MenubarRadioGroup and MenubarRadioItem for single-select options.
Submenu
Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.
Icons
Combine icons with labels for quick scanning.
Rtl
Right-to-left menubar. See the RTL configuration guide for document direction.
API Reference
Menubar
PropType
AttributeType
MenubarMenu
AttributeType
MenubarTrigger
PropType
AttributeType
MenubarContent
PropType
AttributeType
CSS variableType
--trigger-anchor-pointstringMenubarGroup
AttributeType
MenubarLabel
PropType
AttributeType
MenubarItem
MenubarCheckboxItem
MenubarRadioGroup
AttributeType
MenubarRadioItem
MenubarSeparator
PropType
AttributeType
MenubarShortcut
PropType
AttributeType
MenubarSub
AttributeType
MenubarSubTrigger
PropType
AttributeType
MenubarSubContent
PropType
AttributeType