Menubar
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. Built on Base UI's menubar primitive.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- MenubarTrigger measures the ambient direction where it renders and passes it explicitly to each portaled MenubarContent, fixing menus that would otherwise always open using document direction regardless of a nearby RTL wrapper
- Built directly on Base UI's Menu primitives instead of wrapping a separate DropdownMenu component, with the same logical ps-/pe-/end-/ms- spacing and rtl:-scale-x-100 submenu chevron as Context Menu
Overview
Installation
Usage
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarShortcut,
MenubarTrigger,
} from "@/components/ui/menubar"
export function Example() {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
</MenubarItem>
<MenubarItem>New Window</MenubarItem>
<MenubarSeparator />
<MenubarItem>Share</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
)
}Examples
RTL
API Reference
Menubar
API reference: Base UI Menubar .