Menubar

import {
  Menubar,
  MenubarContent,

When to use it#

Use a menubar for an application with many commands that can be grouped under a few headings, such as an editor, a report builder or a design tool. The bar stays on screen, so every command is a click or two away.

Once one menu is open, moving the mouse or pressing the arrow keys to a neighbouring menu opens it without closing the bar first. That is what makes it quicker than a row of separate dropdown menus. For a single menu behind a button, use a dropdown menu instead.

Import#

Copyimport {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarGroup,
  MenubarGroupLabel,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
} from "@hel/ui/menubar"

Anatomy#

Menubar is the bar. Each menu in it is a MenubarMenu with a MenubarTrigger, the word in the bar, and a MenubarContent, the popup that holds the items.

Copy<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New invoice</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

The parts inside a menu are the same as the ones in a dropdown menu, renamed for the bar: MenubarItem, MenubarGroup, MenubarSeparator, MenubarSub and the rest. Everything you know about dropdown menu items applies here.

Keyboard#

Left and Right move between the menus in the bar, and Down opens one. Inside a menu, the arrow keys move between items and Enter picks one. Escape closes the menu. In a right-to-left layout, the arrow keys follow the reading direction.

Examples#

Submenus#

Put a MenubarSub inside a menu, with a MenubarSubTrigger and its own MenubarContent, for a group of related choices such as export formats. Open it to the side with side="right". Under a right-to-left direction, side="inline-end" opens it toward the end edge.

Set disabled on a MenubarMenu to turn off one menu, as Help is in the first example. A menu with no items is better left out.

Icons, shortcuts and groups#

An item takes an icon, and a kbd hint shown at the end of the row. MenubarGroup with a MenubarGroupLabel puts a small heading over part of a menu. The ghost variant removes the border and the background, so the bar can sit straight on a header or toolbar.

import { Copy, FilePlus, FolderOpen, Printer, Save } from "lucide-react"

import {

The kbd hint is display only. To make a shortcut that really activates the item while the menu is open, use hotkey instead, such as hotkey="Mod+S". It shows the shortcut as the hint too. Use combinations with Mod or Ctrl, because single letters compete with the menu's type to select.

Checkboxes and radios#

MenubarCheckboxItem is an on or off setting, and MenubarRadioGroup with MenubarRadioItem picks one of several. The menu stays open when one is chosen, so more than one setting can be changed in a visit. Set closeOnClick on an item to change that.

import * as React from "react"

import {

Props#

Menubar#

It also takes every prop of the Base UI menubar.

MenubarMenu#

Takes disabled, to turn one menu off.

MenubarItem#

MenubarCheckboxItem and MenubarRadioItem#

A radio item also takes indicator ("radio" or "check"), leading and description.