Menubar

Horizontal application menu. Click a top-level label to open the first menu; after that, hover to switch menus and to open nested submenus. Click a leaf action or a link — or click outside — to close. Bind [(checked)] (or stayOpen) on items that should toggle without dismissing the menu.

freenew

Application menu

Nested panels use [base-dropdown-menu-trigger] with placement="right". Keyboard: Arrow Left/Right move between top-level menus; Arrow Right opens a submenu; Escape closes.

Last action: — · Word wrap on · Minimap off

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add menubar

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add menubar
// Paths are relative to aliases.components (default: src/app/components)
import { MenubarMenuComponent } from './menubar/menubar-menu.component';
import { MenubarComponent } from './menubar/menubar.component';

@Component({
  selector: 'app-your-component',
  imports: [
    MenubarComponent,
    MenubarMenuComponent
  ],
  template: `...`
})
export class YourComponent {}

API for menubar — generated from JSDoc in the library source.

API reference for menubar
API	Member	Type	Default	Description
`base-menubar`	`—`	`—`	—	Horizontal application menubar. Project `base-menubar-menu` children; each menu opens a `base-dropdown-menu` of actions. Click a top-level trigger to open the first menu; after that, hover switches menus and opens nested submenus. Click a leaf / link or outside to close. Bind `checked` (or `stayOpen`) on items that should toggle without dismissing the menu. Arrow Left/Right move between menus (and switch the open menu); Arrow Down / Enter / Space open; Escape closes.
`base-menubar`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`base-menubar-menu`	`label`	`string`	`''`	Visible label on the menubar trigger.
`base-menubar-menu`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`base-menubar-menu`	`disabled`	`boolean`	`false`	Disables the trigger so the menu cannot open.