Components
Menubar
A horizontal menu bar, like the menus in a macOS application.
Menubar is built on the Base UI Menu primitive. It renders a horizontal bar of menus, each opening a dropdown of actions.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/menubar.jsonUsage
"use client";
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarTrigger,
} from "@/components/ui/menubar";
export default function Example() {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New Tab</MenubarItem>
<MenubarItem>Open</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
);
}Examples
Default
With checkbox and radio items
With submenu
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Menubardata-slot="menubar" | MenubarBase UI | — |
MenubarMenudata-slot="menubar-menu" | DropdownMenuFaber UI | — |
MenubarGroupdata-slot="menubar-group" | DropdownMenuGroupFaber UI | — |
MenubarPortaldata-slot="menubar-portal" | DropdownMenuPortalFaber UI | — |
MenubarTriggerdata-slot="menubar-trigger" | DropdownMenuTriggerFaber UI | — |
MenubarContentdata-slot="menubar-content" | DropdownMenuContentFaber UI | — |
MenubarItemdata-slot="menubar-item" | DropdownMenuItemFaber UI | — |
MenubarCheckboxItemdata-slot="menubar-checkbox-item" | Menu.CheckboxItemBase UI |
|
MenubarRadioGroupdata-slot="menubar-radio-group" | DropdownMenuRadioGroupFaber UI | — |
MenubarRadioItemdata-slot="menubar-radio-item" | Menu.RadioItemBase UI |
|
MenubarLabeldata-slot="menubar-label" | DropdownMenuLabelFaber UI |
|
MenubarSeparatordata-slot="menubar-separator" | DropdownMenuSeparatorFaber UI | — |
MenubarShortcutdata-slot="menubar-shortcut" | DropdownMenuShortcutFaber UI | — |
MenubarSubdata-slot="menubar-sub" | DropdownMenuSubFaber UI | — |
MenubarSubTriggerdata-slot="menubar-sub-trigger" | DropdownMenuSubTriggerFaber UI |
|
MenubarSubContentdata-slot="menubar-sub-content" | DropdownMenuSubContentFaber UI | — |
Changelog
- v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
- v0.1.0Restore open and close animations on every menu-family popup.patch
Last updated on