# Menu
Use `ui-menu` for compact action menus, overflow controls, contextual actions, and split-button patterns. Use `ui-menu-list` when you need to render the list surface itself, for example in custom overlays or embedded command panels.
## Import
```ts
import { MenuComponent, MenuListComponent, type MenuItem, type MenuSection } from 'ui';
```
## Basic menu button
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, MenuComponent, type MenuItem } from 'ui';
@Component({
selector: 'app-menu-basic-demo',
standalone: true,
imports: [ButtonComponent, MenuComponent],
template: `
Reset
Last action: {{ lastAction() || 'none' }}
`,
})
export class MenuBasicDemoComponent {
protected readonly lastAction = signal('');
protected readonly viewItems: MenuItem[] = [
{ id: 'board', label: 'Board', icon: 'board' },
{ id: 'calendar', label: 'Calendar', icon: 'calendar' },
{ id: 'timeline', label: 'Timeline', icon: 'clock' },
];
protected onItemClick(item: MenuItem): void {
this.lastAction.set(item.label);
}
protected reset(): void {
this.lastAction.set('');
}
}
```
## Dropdown, split, and button triggers
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, MenuComponent, type MenuItem } from 'ui';
@Component({
selector: 'app-menu-trigger-variants-demo',
standalone: true,
imports: [ButtonComponent, MenuComponent],
template: `
Reset
Last action: {{ lastAction() || 'none' }}
Dropdown trigger
A standard menu button with a dedicated chevron.
Split trigger
One primary action plus a compact menu for alternatives.
Button trigger
Acts like a plain button when no menu items are passed.
`,
})
export class MenuTriggerVariantsDemoComponent {
protected readonly lastAction = signal('');
protected readonly shareItems: MenuItem[] = [
{ id: 'copy-link', label: 'Copy link', icon: 'link' },
{ id: 'invite', label: 'Invite people', icon: 'person_add' },
{ id: 'export', label: 'Export PDF', icon: 'arrow_download' },
];
protected readonly saveItems: MenuItem[] = [
{ id: 'save', label: 'Save', icon: 'save' },
{ id: 'save-as', label: 'Save as copy', icon: 'document_copy' },
{ id: 'save-template', label: 'Save as template', icon: 'document_add' },
];
protected onItemClick(item: MenuItem): void {
this.lastAction.set(item.label);
}
protected reset(): void {
this.lastAction.set('');
}
}
```
## Sections and shortcuts
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, MenuListComponent, type MenuItem, type MenuSection } from 'ui';
@Component({
selector: 'app-menu-sections-shortcuts-demo',
standalone: true,
imports: [ButtonComponent, MenuListComponent],
template: `
Reset
Last action: {{ lastAction() || 'none' }}
`,
})
export class MenuSectionsShortcutsDemoComponent {
protected readonly lastAction = signal('');
protected readonly sections: MenuSection[] = [
{
header: 'File',
divider: true,
items: [
{ id: 'new', label: 'New file', icon: 'document', shortcut: 'Ctrl+N' },
{ id: 'open', label: 'Open', icon: 'folder', shortcut: 'Ctrl+O' },
{ id: 'save', label: 'Save', icon: 'save', shortcut: 'Ctrl+S' },
],
},
{
header: 'Edit',
divider: true,
items: [
{ id: 'undo', label: 'Undo', icon: 'arrow_undo', shortcut: 'Ctrl+Z' },
{ id: 'redo', label: 'Redo', icon: 'arrow_redo', shortcut: 'Ctrl+Shift+Z', disabled: true },
{ id: 'find', label: 'Find', icon: 'search', shortcut: 'Ctrl+F' },
],
},
{
header: 'View',
items: [
{ id: 'outline', label: 'Outline', icon: 'panel_left', selected: true },
{ id: 'comments', label: 'Comments', icon: 'comment' },
],
},
];
protected onItemClick(item: MenuItem): void {
this.lastAction.set(item.label);
}
protected reset(): void {
this.lastAction.set('');
}
}
```
## Nested submenu flows
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, MenuComponent, type MenuItem } from 'ui';
@Component({
selector: 'app-menu-submenu-demo',
standalone: true,
imports: [ButtonComponent, MenuComponent],
template: `
Reset
Last action: {{ lastAction() || 'none' }}
`,
})
export class MenuSubmenuDemoComponent {
protected readonly lastAction = signal('');
protected readonly insertItems: MenuItem[] = [
{
id: 'heading',
label: 'Heading',
icon: 'text_font',
submenuItems: [
{ id: 'h1', label: 'Heading 1', icon: 'text_font' },
{ id: 'h2', label: 'Heading 2', icon: 'text_font' },
{ id: 'h3', label: 'Heading 3', icon: 'text_font' },
],
},
{
id: 'media',
label: 'Media',
icon: 'image',
submenuItems: [
{ id: 'image', label: 'Image', icon: 'image' },
{ id: 'carousel', label: 'Carousel', icon: 'arrow_circle_right' },
],
},
{ id: 'divider', label: 'Divider', icon: 'divider_tall' },
];
protected readonly exportItems: MenuItem[] = [
{
id: 'share',
label: 'Share',
icon: 'share',
submenuItems: [
{ id: 'copy-link', label: 'Copy link', icon: 'link' },
{ id: 'invite-reviewers', label: 'Invite reviewers', icon: 'person_add' },
],
},
{ id: 'pdf', label: 'PDF', icon: 'document' },
{ id: 'markdown', label: 'Markdown', icon: 'document' },
];
protected onItemClick(item: MenuItem): void {
this.lastAction.set(item.label);
}
protected reset(): void {
this.lastAction.set('');
}
}
```
## Contextual row actions
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, MenuComponent, type MenuItem } from 'ui';
@Component({
selector: 'app-menu-context-actions-demo',
standalone: true,
imports: [ButtonComponent, MenuComponent],
template: `
Reset
Last action: {{ lastAction() || 'none' }}
@for (item of rows; track item.id) {
{{ item.label }}
{{ item.meta }}
}
`,
})
export class MenuContextActionsDemoComponent {
protected readonly lastAction = signal('');
protected readonly rows = [
{
id: 'brief',
label: 'Creative brief',
meta: 'Updated 10 minutes ago',
menuItems: [
{ id: 'open-brief', label: 'Open', icon: 'open' },
{ id: 'duplicate-brief', label: 'Duplicate', icon: 'document_copy' },
{ id: 'archive-brief', label: 'Archive', icon: 'archive' },
] as MenuItem[],
},
{
id: 'assets',
label: 'Campaign assets',
meta: '5 files waiting for approval',
menuItems: [
{ id: 'open-assets', label: 'Open', icon: 'open' },
{ id: 'share-assets', label: 'Share', icon: 'share' },
{ id: 'delete-assets', label: 'Delete', icon: 'delete', disabled: true },
] as MenuItem[],
},
];
protected onMenuAction(item: MenuItem, label: string): void {
this.lastAction.set(`${item.label} on ${label}`);
}
protected reset(): void {
this.lastAction.set('');
}
}
```
## Overlay behavior in constrained shells
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, MenuComponent, type MenuItem } from 'ui';
@Component({
selector: 'app-menu-overflow-demo',
standalone: true,
imports: [ButtonComponent, MenuComponent],
template: `
Reset
Last action: {{ lastAction() || 'none' }}
The trigger sits inside a clipped shell, but the overlay should still escape and stay
usable.
`,
})
export class MenuOverflowDemoComponent {
protected readonly lastAction = signal('');
protected readonly items: MenuItem[] = [
{ id: 'duplicate', label: 'Duplicate', icon: 'document_copy' },
{ id: 'move', label: 'Move to folder', icon: 'folder' },
{ id: 'delete', label: 'Delete', icon: 'delete' },
];
protected onItemClick(item: MenuItem): void {
this.lastAction.set(item.label);
}
protected reset(): void {
this.lastAction.set('');
}
}
```
## Workspace command header
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, MenuComponent, SearchComponent, type MenuItem } from 'ui';
@Component({
selector: 'app-menu-workspace-header-demo',
standalone: true,
imports: [ButtonComponent, MenuComponent, SearchComponent],
template: `
Q3 launch workspace
Menus often live beside search, primary actions, and compact overflow actions in one
command header.
Reset
Last action: {{ lastAction() || 'none' }}
`,
})
export class MenuWorkspaceHeaderDemoComponent {
protected readonly lastAction = signal('');
protected readonly publishItems: MenuItem[] = [
{ id: 'publish-now', label: 'Publish now', icon: 'arrow_upload' },
{ id: 'schedule', label: 'Schedule publish', icon: 'calendar' },
{ id: 'save-draft', label: 'Save as draft', icon: 'save' },
];
protected readonly overflowItems: MenuItem[] = [
{ id: 'rename', label: 'Rename workspace', icon: 'rename' },
{ id: 'permissions', label: 'Permissions', icon: 'shield' },
{ id: 'archive', label: 'Archive workspace', icon: 'archive' },
];
protected onItemClick(item: MenuItem): void {
this.lastAction.set(item.label);
}
protected reset(): void {
this.lastAction.set('');
}
}
```
## Accessibility
### Trigger and menu semantics
`ui-menu` exposes a button-like trigger. When it opens a menu, the trigger reflects `aria-haspopup="menu"` and `aria-expanded`. `ui-menu-list` renders the actual menu surface with `role="menu"`.
### Keyboard behavior
Keyboard handling matters most inside `ui-menu-list`.
| Key | Action |
| --- | --- |
| ArrowDown / ArrowUp | Move focus between enabled menu rows. |
| Enter / Space | Activate the focused row. |
| ArrowRight | Open a submenu when the focused row has nested items. |
| ArrowLeft | Close the current submenu level. |
| Escape | Close the current menu surface. |
| Tab | Closes the menu instead of tabbing through every row. |
### Labels and split actions
Icon-only triggers need a clear `ariaLabel`. For split buttons, the primary action and the dropdown affordance serve different purposes, so both need understandable labeling and should not duplicate hidden meaning.