Menubar

A horizontal menu bar with dropdown menus, keyboard navigation, and support for checkboxes and radio items. Built on Radix UI — copy it into your project and own it completely.

Default

Destructive Items

Disabled Items

Installation

npx visor add menubar

This copies two files into your project:

components/ui/menubar/menubar.tsx — the component
components/ui/menubar/menubar.module.css — the styles

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
} from '@/components/ui/menubar/menubar';

export default function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New</MenubarItem>
          <MenubarItem>Open</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Save</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

API Reference

MenubarItem Props

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	Visual style of MenubarItem. Use "destructive" for dangerous actions like delete.
`inset`	`boolean`	`false`	Adds left padding to align items that have no icon with items that do.
`disabled`	`boolean`	`false`	Disables the menu item, preventing selection and applying reduced-opacity styling.
`onSelect`	`(event: Event) => void`	—	Callback when the item is selected. Called on click or Enter key.
`className`	`string`	—	Additional CSS class names to merge onto the element.

The Menubar root, MenubarMenu, MenubarTrigger, MenubarContent, and MenubarSeparator forward all standard Radix UI Menubar primitive props.

Sub-components

Component	Element	Purpose
`Menubar`	`<div>`	Root container for the menu bar
`MenubarMenu`	—	Wrapper for a single menu trigger + content pair
`MenubarTrigger`	`<button>`	Clickable trigger that opens a menu
`MenubarContent`	`<div>`	Dropdown menu panel
`MenubarGroup`	`<div>`	Logical group of items within content
`MenubarItem`	`<div>`	Selectable action item
`MenubarCheckboxItem`	`<div>`	Toggleable checkbox item
`MenubarRadioGroup`	`<div>`	Container for mutually exclusive radio items
`MenubarRadioItem`	`<div>`	Radio-style selectable item
`MenubarLabel`	`<div>`	Non-interactive section label
`MenubarSeparator`	`<hr>`	Visual divider between groups or items
`MenubarShortcut`	`<span>`	Keyboard shortcut label aligned to the right
`MenubarSub`	—	Wrapper for a nested sub-menu
`MenubarSubTrigger`	`<div>`	Item that opens a sub-menu on hover/focus
`MenubarSubContent`	`<div>`	Sub-menu dropdown panel

Accessibility

The Menubar root renders with role="menubar" and manages keyboard navigation automatically.
Each MenubarTrigger has aria-haspopup="menu" and aria-expanded managed by Radix UI.
MenubarContent renders with role="menu" and each MenubarItem has role="menuitem".
MenubarCheckboxItem uses role="menuitemcheckbox" with aria-checked; MenubarRadioItem uses role="menuitemradio".
Keyboard navigation: ←/→ moves between top-level triggers, ↑/↓ navigates items within an open menu, Enter/Space selects, Escape closes the open menu.
Disabled items use aria-disabled="true" and are skipped during keyboard navigation.

Menubar

On this page