Menubar
A visually persistent menu common in desktop applications.
Installation
npm i @radix-ui/react-menubarUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarShortcut,
MenubarTrigger,
} from "@/components/ui/menubar"
export function MenubarDemo() {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
</MenubarItem>
<MenubarItem>New Window</MenubarItem>
<MenubarSeparator />
<MenubarItem>Share</MenubarItem>
<MenubarSeparator />
<MenubarItem>Print</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
)
}Examples
With Submenu
With Disabled Items
Props
| Component | Props | Description |
|---|---|---|
| Menubar | MenubarPrimitive.MenubarProps | The root component for the menubar. |
| MenubarMenu | MenubarPrimitive.MenuProps | A menu that contains menu items. |
| MenubarTrigger | MenubarPrimitive.MenubarTriggerProps | The button that toggles the menu. |
| MenubarContent | MenubarPrimitive.MenubarContentProps align?: "start" | "center" | "end" alignOffset?: number sideOffset?: number | The content shown when the menu is open. |
| MenubarItem | MenubarPrimitive.MenubarItemProps inset?: boolean | A menu item within the menu content. |
| MenubarSeparator | MenubarPrimitive.MenubarSeparatorProps | A visual separator for menu items. |
| MenubarShortcut | HTMLAttributes<HTMLSpanElement> | A component to display keyboard shortcuts alongside menu items. |
| MenubarSub | MenubarPrimitive.SubProps | A sub-menu container nested within a menu. |
| MenubarSubTrigger | MenubarPrimitive.SubTriggerProps inset?: boolean | The trigger button for a sub-menu. |
| MenubarSubContent | MenubarPrimitive.SubContentProps | The content shown when a sub-menu is open. |