Faber UI
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

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/menubar.json

Usage

typescript
"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.

PartBuilt onProps
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
  • inset?boolean
MenubarRadioGroupdata-slot="menubar-radio-group"DropdownMenuRadioGroupFaber UI—
MenubarRadioItemdata-slot="menubar-radio-item"Menu.RadioItemBase UI
  • inset?boolean
MenubarLabeldata-slot="menubar-label"DropdownMenuLabelFaber UI
  • inset?boolean
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
  • inset?boolean
MenubarSubContentdata-slot="menubar-sub-content"DropdownMenuSubContentFaber UI—

Changelog

  1. 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
  2. v0.1.0Restore open and close animations on every menu-family popup.patch
Full Menubar history

Last updated on

On this page