Layout UI

Menubar

A horizontal bar of menus typical of desktop-style application toolbars, built on Base UI Menubar and Menu. Supports multiple top-level menus each with full dropdown content including checkboxes, radio groups, and sub-menus.

Preview

Installation

bash
npx shadcn@latest add @layout/menubar

Usage

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

Examples

With checkboxes and radio

Guidelines for AI agents

Use for application-level navigation in text editors, IDEs, or admin tools where File / Edit / View menus are a familiar convention. Each MenubarMenu is a separate root; wrap them all in a single Menubar.

Never

  • Neveruse Menubar for site navigation; use NavigationMenu for marketing or app-shell nav
  • Neveruse Menubar for a single menu; DropdownMenu is simpler and more appropriate
  • Nevermix Menubar triggers with DropdownMenu triggers in the same toolbar
  • Neverhardcode colours; use the variant prop on MenubarItem for destructive actions

Tokens consumed

--layout-bg--layout-overlay--layout-overlay-fg--layout-accent--layout-accent-fg--layout-border--layout-radius--layout-shadow-xs--layout-shadow-md--layout-duration-base