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

<base-menubar>
  <base-menubar-menu label="File">
    <base-dropdown-menu-item>New Tab</base-dropdown-menu-item>
    <base-dropdown-menu-item [base-dropdown-menu-trigger]="recent" placement="right">
      Open Recent
      <base-icon name="chevron-right" class="ml-auto h-4 w-4"></base-icon>
    </base-dropdown-menu-item>
    <base-dropdown-menu #recent>
      <base-dropdown-menu-item>Project A</base-dropdown-menu-item>
      <base-dropdown-menu-item [base-dropdown-menu-trigger]="more" placement="right">
        More
      </base-dropdown-menu-item>
      <base-dropdown-menu #more>
        <base-dropdown-menu-item>From GitHub</base-dropdown-menu-item>
      </base-dropdown-menu>
    </base-dropdown-menu>
    <base-dropdown-menu-item [(checked)]="wordWrap">Word wrap</base-dropdown-menu-item>
  </base-menubar-menu>
</base-menubar>

TypeScript

import { Component } from '@angular/core';

// 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-menubar-example',
  imports: [
    MenubarComponent,
    MenubarMenuComponent
  ],
  template: `...`
})
export class MenubarExampleComponent {}

Install

bash

npx base-ui-cli add menubar

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-ng-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.

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).