Menu Bar for Angular

import { AuiMenuBar } from '@absoluteui/angular/menu-bar';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Menu Bar page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { menuBar: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { MenuBarItem, MenuBarSelectDetail } from '@absoluteui/components/menu-bar';
import { AuiMenuBar } from '@absoluteui/angular/menu-bar';

@Component({
  selector: 'app-editor-menu',
  imports: [AuiMenuBar],
  template: `<aui-menu-bar label="Editor" [items]="items" (selected)="onSelect($event)"></aui-menu-bar>`,
})
export class EditorMenuComponent {
  readonly items: MenuBarItem[] = [
    { id: 'file', label: 'File', items: [{ id: 'new', label: 'New' }, { id: 'save', label: 'Save' }] },
    { id: 'help', label: 'Help' },
  ];

  onSelect(detail: MenuBarSelectDetail): void {
    if (detail.id === 'save') {
      // save the document
    }
  }
}

<aui-menu-bar>

Class AuiMenuBar; template reference #ref="auiMenuBar".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the menubar (aria-label). Must be a non-empty string.
items	readonly MenuBarItem[]		Required. Non-empty list of menubar items { id, label, icon?, disabled?, items? }. Items with items open a Menu; items without are commands. Ids are unique across the bar and all of its menus.
renderItem	MenuRenderItem		Custom item content (since 0.9.0); the label stays the accessible name and typeahead text. Nodes are reused per item and released with releaseNode when dropped.
icons	Partial<MenuIcons>		Icon slot overrides passed to every menu.
closeOnSelect	boolean	true	Menus close after activating a checkbox or radio item. Action items always close the menu.
typeahead	boolean	true	Printable characters move focus to the next bar item (skipping disabled items) or menu item whose label starts with them.
direction	Direction	'ltr'	Arrow-key mirroring and menu/submenu sides. An inherited dir=rtl on the host also makes the bar RTL.

Outputs

Output	Payload	Description
(selected)	MenuSelectDetail	A command bar item or an enabled menu item was activated. Always dispatched on the host (menu selections are re-dispatched there). checked is the new state for checkbox and radio items. Re-emits aui-select.

Methods

Call them through a viewChild query or a template reference.

Method	Description
close(): void	Close any open menu; focus returns to its menubar item when it was inside the menu.

Templates

Customize rendering with AuiItem from @absoluteui/angular/templates.