A menubar component that provides a desktop application-style menu system with multiple dropdown menus organized horizontally.
Installation
npx shadcn@latest add @eo-n/menubar
Install dependencies
npm install @base-ui/react
Copy component code
Copy the menubar component from the registry and paste it into your project at components/ui/menubar.tsx.
Update imports
Update the import paths to match your project setup, particularly the @/lib/utils import.
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Menubar } from "@/components/ui/menubar";
Basic Example
<Menubar>
<DropdownMenu>
<DropdownMenuTrigger>File</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>New Tab</DropdownMenuItem>
<DropdownMenuItem>New Window</DropdownMenuItem>
<DropdownMenuItem>Share</DropdownMenuItem>
<DropdownMenuItem>Print</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</Menubar>
Complete Example
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Menubar } from "@/components/ui/menubar";
export default function MenubarDemo() {
return (
<Menubar>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
variant="ghost"
size="sm"
className="data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground"
>
Project
</Button>
}
/>
<DropdownMenuContent className="min-w-48" sideOffset={10}>
<DropdownMenuItem>
New Project <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Open Project <DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem disabled>Import Project</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
<DropdownMenuContent>
<DropdownMenuItem>As PDF</DropdownMenuItem>
<DropdownMenuItem>As HTML</DropdownMenuItem>
<DropdownMenuItem>As Markdown</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem>
Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
variant="ghost"
size="sm"
className="data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground"
>
Tools
</Button>
}
/>
<DropdownMenuContent className="min-w-48" sideOffset={10}>
<DropdownMenuItem>
Settings <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Extensions <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</Menubar>
);
}
API Reference
The root menubar container that holds all dropdown menus.
Whether the menubar should trap focus when open. Set to false to allow interaction with other elements.
Additional CSS classes to apply to the menubar.
Component Structure
interface MenubarProps extends React.ComponentProps<typeof MenubarRoot> {
modal?: boolean;
className?: string;
}
- Background color matching the application theme
- Minimal height of 36px (h-9)
- Horizontal flex layout with gap spacing
- Rounded corners and subtle shadow
- Border and padding for visual separation
The Menubar is designed to work seamlessly with DropdownMenu components. Each menu trigger should be styled as a ghost button with appropriate state styling:
<DropdownMenuTrigger
render={
<Button
variant="ghost"
size="sm"
className="data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground"
>
Menu Label
</Button>
}
/>
Features
- Desktop-Style Navigation: Familiar menubar pattern from desktop applications
- Modal Control: Configure whether focus is trapped within the menubar
- Consistent Styling: Pre-styled to match your application theme
- Nested Menus: Supports nested dropdown menus with sub-menus
- Keyboard Navigation: Full keyboard support for navigation and selection
- Accessible: Built on Base UI primitives with proper ARIA attributes
Accessibility
- Keyboard navigation with arrow keys
- Focus management across menu items
- Proper ARIA roles and attributes
- Screen reader support for menu structure
Common Patterns
Use the menubar for application-level navigation and actions:
<Menubar>
<DropdownMenu>File Menu</DropdownMenu>
<DropdownMenu>Edit Menu</DropdownMenu>
<DropdownMenu>View Menu</DropdownMenu>
<DropdownMenu>Help Menu</DropdownMenu>
</Menubar>
With Keyboard Shortcuts
Display keyboard shortcuts for menu actions:
<DropdownMenuItem>
Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
