Menubar

Installation

npx shadcn@latest add @uqudo/menubar

Usage

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/uqudo/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Each MenubarMenu pairs one MenubarTrigger with one MenubarContent. Content is rendered through a portal, so it can escape overflow containers.

API Reference

MenubarContent

Prop

Type

MenubarItem

Prop

Type

Other exports

MenubarCheckboxItem, MenubarRadioItem, MenubarSubTrigger and MenubarLabel also accept the inset boolean. Everything else forwards className and the props of the matching Radix primitive.

Component	Wraps	Notes
`Menubar`	`Menubar.Root`	The bar itself.
`MenubarMenu`	`Menubar.Menu`	One trigger + content pair.
`MenubarTrigger`	`Menubar.Trigger`	The button in the bar.
`MenubarGroup`	`Menubar.Group`	Groups related items.
`MenubarLabel`	`Menubar.Label`	Non-interactive heading inside a menu.
`MenubarSeparator`	`Menubar.Separator`	Thin divider.
`MenubarShortcut`	`span`	Right-aligned hint text, e.g. `⌘T`.
`MenubarCheckboxItem`	`Menubar.CheckboxItem`	Shows a check mark when `checked`.
`MenubarRadioGroup`	`Menubar.RadioGroup`	Controls a set of `MenubarRadioItem`s via `value`.
`MenubarRadioItem`	`Menubar.RadioItem`	Shows a check mark when selected.
`MenubarSub`	`Menubar.Sub`	Nested menu container.
`MenubarSubTrigger`	`Menubar.SubTrigger`	Opens the sub menu; renders a chevron.
`MenubarSubContent`	`Menubar.SubContent`	The nested menu panel.
`MenubarPortal`	`Menubar.Portal`	Already used by `MenubarContent`.

Data attributes

Every element carries a data-slot such as menubar, menubar-trigger, menubar-content or menubar-item. Items also expose data-inset and data-variant.