Clinia UI

Menubar

A persistent row of menus, as in a desktop app.

shadcn docs →

When to use

  • A desktop-style tool with many commands grouped by menu: an editor, a query console.

When not to use

  • A few actions for one item: use Dropdown Menu.
  • Site navigation: use Navigation Menu.
  • Two or three frequent actions: show them as Buttons.

Install

npx shadcn@latest add @clinia/menubar

Clinia rules

  • The highlighted item is bg-foreground/4 with text-foreground, the same as Dropdown Menu.
  • Menu names are one word (File, View). Items start with a verb or name the result: New record, Show archived.
  • Destructive items take variant="destructive" and sit last, after a separator.
  • MenubarShortcut is display text only. Show a shortcut only if you bind it.

Do and don't

Do name each menu in one word.
Don't write menu names as phrases.

Accessibility

Built in

  • Arrow Left and Arrow Right move between menus in the bar. Enter, Space or Arrow Down opens a menu.
  • Inside a menu, arrow keys move between items, Enter picks, and Escape closes it and returns focus to its trigger.

Your responsibility

  • Bind every shortcut you show, and don't take over shortcuts the browser or screen reader relies on.
  • Keep a disabled item only when the reason is visible, such as Export (owner only).

How to test

  1. Press Tab to reach the menubar: focus lands on the first menu.
  2. Press Arrow Right: focus moves to the next menu. Press Enter: it opens on the first item.
  3. Press Escape: the menu closes and focus returns to its trigger.
  4. With a screen reader, the bar is announced as a menubar, and each item with its role and position.

API

MenubarLabel

PropValuesDefaultDescription
inset
boolean
–

Indents the label to line up with items that have an icon or an indicator.

MenubarItem

PropValuesDefaultDescription
inset
boolean
–

Indents the item to line up with siblings that have an icon or an indicator.

variant
defaultdestructive
default

destructive for delete, revoke, and remove: red text and a red highlight. Not for archive or sign out, which lose nothing.

MenubarCheckboxItem

PropValuesDefaultDescription
inset
boolean
–

Indents the item to line up with siblings that have an icon or an indicator.

MenubarRadioItem

PropValuesDefaultDescription
inset
boolean
–

Indents the item to line up with siblings that have an icon or an indicator.

MenubarSubTrigger

PropValuesDefaultDescription
inset
boolean
–

Indents the item to line up with siblings that have an icon or an indicator.

All other props come from Base UI Menubar.

Related