shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/menubar.jsonnpx shadcn@latest add https://kit.dev/r/menubar.jsonpnpm dlx shadcn@latest add https://kit.dev/r/menubar.jsonyarn shadcn@latest add https://kit.dev/r/menubar.jsonThis component depends on Dropdown Menu. Install it first if you haven't already.
Install the following dependencies:
bun add @ark-ui/react lucide-reactnpm install @ark-ui/react lucide-reactpnpm add @ark-ui/react lucide-reactyarn add @ark-ui/react lucide-reactCopy and paste the following code into your project.
"use client";
import { Portal } from "@ark-ui/react/portal";
import type React from "react";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,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
MenubarGroup
AttributeType
MenubarPortal
AttributeType
MenubarItem
PropType
AttributeType
MenubarCheckboxItem
PropType
AttributeType
MenubarRadioGroup
AttributeType
MenubarRadioItem
PropType
AttributeType
MenubarLabel
PropType
AttributeType
MenubarSeparator
PropType
AttributeType
MenubarShortcut
PropType
AttributeType
MenubarSub
AttributeType
MenubarSubTrigger
PropType
AttributeType
MenubarSubContent
PropType
AttributeType