The Angular CDK Menu module provides a comprehensive menu system with support for nested submenus, keyboard navigation, ARIA compliance, and intelligent hover behavior. It includes components for menu bars, context menus, and various menu item types.
Core menu components for creating accessible menu interfaces.
/**
* Directive for creating accessible menus
*/
class CdkMenu {
/**
* The menu's orientation (horizontal or vertical)
*/
orientation: 'horizontal' | 'vertical';
/**
* Whether the menu is inline (part of the page flow) or a popup
*/
isInline: boolean;
/**
* The menu items contained within this menu
*/
readonly items: readonly CdkMenuItem[];
/**
* Unique identifier for this menu
*/
id: string;
/**
* Focus the first menu item
*/
focusFirstItem(origin?: FocusOrigin): void;
/**
* Focus the last menu item
*/
focusLastItem(origin?: FocusOrigin): void;
}
/**
* Directive for horizontal menu bars
*/
class CdkMenuBar {
/**
* The menu items contained within this menu bar
*/
readonly items: readonly CdkMenuItem[];
/**
* Unique identifier for this menu bar
*/
id: string;
/**
* Focus the first menu item
*/
focusFirstItem(origin?: FocusOrigin): void;
/**
* Focus the last menu item
*/
focusLastItem(origin?: FocusOrigin): void;
}
/**
* Directive for grouping related menu items
*/
class CdkMenuGroup {
/**
* Unique identifier for this menu group
*/
id: string;
}Different types of menu items with various interaction patterns.
/**
* Base directive for menu items with keyboard navigation
*/
class CdkMenuItem {
/**
* Whether the menu item is disabled
*/
disabled: boolean;
/**
* The text used to locate this item during menu typeahead
*/
typeaheadLabel: string;
/**
* Programmatically trigger the menu item
*/
trigger(): void;
/**
* Focus this menu item
*/
focus(origin?: FocusOrigin): void;
/**
* Reset the menu item to its initial state
*/
reset(): void;
}
/**
* Directive for checkbox menu items
*/
class CdkMenuItemCheckbox {
/**
* Whether the checkbox is checked
*/
checked: boolean;
/**
* Whether the checkbox is in an indeterminate state
*/
indeterminate: boolean;
/**
* Event emitted when the checkbox state changes
*/
readonly checkedChange: EventEmitter<boolean>;
/**
* Toggle the checkbox state
*/
toggle(): void;
}
/**
* Directive for radio button menu items
*/
class CdkMenuItemRadio {
/**
* Whether this radio button is checked
*/
checked: boolean;
/**
* The name of the radio group this item belongs to
*/
name: string;
/**
* Event emitted when the radio button is selected
*/
readonly change: EventEmitter<CdkMenuItemRadio>;
/**
* Select this radio button
*/
select(): void;
}Components for triggering menus and handling menu interactions.
/**
* Base directive for menu triggers
*/
abstract class CdkMenuTriggerBase {
/**
* Whether the menu is open
*/
readonly isOpen: boolean;
/**
* Template reference for the menu to open
*/
menuTemplateRef: TemplateRef<unknown> | null;
/**
* Data to pass to the menu template
*/
menuData: unknown;
/**
* Event emitted when the menu is opened
*/
readonly opened: EventEmitter<void>;
/**
* Event emitted when the menu is closed
*/
readonly closed: EventEmitter<void>;
/**
* Open the menu
*/
open(): void;
/**
* Close the menu
*/
close(): void;
/**
* Toggle the menu open/closed state
*/
toggle(): void;
/**
* Get the menu instance
*/
getMenu(): CdkMenu | undefined;
}
/**
* Directive for elements that trigger menus on click
*/
class CdkMenuTrigger extends CdkMenuTriggerBase {
/**
* References the child menu instance
*/
readonly childMenu: CdkMenu | undefined;
}
/**
* Directive for triggering context menus
*/
class CdkContextMenuTrigger extends CdkMenuTriggerBase {
/**
* Whether the context menu is disabled
*/
disabled: boolean;
/**
* Handle right-click events to open context menu
*/
_handleContextMenu(event: MouseEvent): void;
}Services that manage menu behavior and state.
/**
* Service managing the menu stack and focus state
*/
class MenuStack {
/**
* All menu stack items tracked by this service
*/
readonly items: readonly MenuStackItem[];
/**
* The currently focused menu item
*/
readonly activeItem: CdkMenuItem | undefined;
/**
* Push a new menu onto the stack
*/
push(menu: MenuStackItem): void;
/**
* Pop the topmost menu from the stack
*/
pop(menu?: MenuStackItem, options?: {focusParentTrigger?: boolean}): void;
/**
* Check if the stack is empty
*/
isEmpty(): boolean;
/**
* Get the length of the menu stack
*/
length(): number;
/**
* Close all menus in the stack
*/
closeAll(options?: {focusParentTrigger?: boolean}): void;
/**
* Set focus to a specific menu item
*/
setFocusOrigin(origin: FocusOrigin): void;
/**
* Set the currently active menu item
*/
setActiveItem(item: CdkMenuItem): void;
}
/**
* Service for intelligent menu hover behavior
*/
class MenuAim {
/**
* Set the currently active menu item
*/
setActiveItem(item: CdkMenuItem): void;
/**
* Check if mouse movement indicates intent to stay in current submenu
*/
isTargeting(item: CdkMenuItem): boolean;
/**
* Reset the aim tracking
*/
reset(): void;
/**
* Toggle the service on/off
*/
toggle(enabled: boolean): void;
}
/**
* Service for tracking pointer focus in menus
*/
class PointerFocusTracker<T extends CdkMenuItem> {
/**
* The currently active item
*/
readonly activeElement: T | null;
/**
* Set the active element
*/
setActiveItem(element: T): void;
/**
* Clear the active element
*/
clearActiveItem(): void;
/**
* Destroy the tracker
*/
destroy(): void;
}Usage Example:
import { Component } from '@angular/core';
import { CdkMenuModule } from '@angular/cdk/menu';
@Component({
template: `
<div cdkMenuBar>
<button cdkMenuItem [cdkMenuTriggerFor]="fileMenu">File</button>
<button cdkMenuItem [cdkMenuTriggerFor]="editMenu">Edit</button>
<button cdkMenuItem [cdkMenuTriggerFor]="viewMenu">View</button>
</div>
<ng-template #fileMenu>
<div cdkMenu>
<button cdkMenuItem>New</button>
<button cdkMenuItem>Open</button>
<button cdkMenuItem [cdkMenuTriggerFor]="recentMenu">Recent</button>
<hr>
<button cdkMenuItem>Save</button>
<button cdkMenuItem>Save As...</button>
</div>
</ng-template>
<ng-template #recentMenu>
<div cdkMenu>
<button cdkMenuItem>Document 1.txt</button>
<button cdkMenuItem>Document 2.txt</button>
<button cdkMenuItem>Document 3.txt</button>
</div>
</ng-template>
<ng-template #editMenu>
<div cdkMenu>
<button cdkMenuItem>Undo</button>
<button cdkMenuItem>Redo</button>
<hr>
<button cdkMenuItem>Cut</button>
<button cdkMenuItem>Copy</button>
<button cdkMenuItem>Paste</button>
</div>
</ng-template>
<div cdkMenuGroup>
<label>Text Options</label>
<button cdkMenuItemCheckbox [(checked)]="isBold">Bold</button>
<button cdkMenuItemCheckbox [(checked)]="isItalic">Italic</button>
<button cdkMenuItemCheckbox [(checked)]="isUnderline">Underline</button>
</div>
<div cdkMenuGroup>
<label>Font Size</label>
<button cdkMenuItemRadio name="fontSize" [checked]="fontSize === 'small'" (change)="fontSize = 'small'">Small</button>
<button cdkMenuItemRadio name="fontSize" [checked]="fontSize === 'medium'" (change)="fontSize = 'medium'">Medium</button>
<button cdkMenuItemRadio name="fontSize" [checked]="fontSize === 'large'" (change)="fontSize = 'large'">Large</button>
</div>
`,
standalone: true,
imports: [CdkMenuModule]
})
export class MenuExample {
isBold = false;
isItalic = false;
isUnderline = false;
fontSize = 'medium';
}import { Component } from '@angular/core';
@Component({
template: `
<div
cdkContextMenuTrigger
[cdkContextMenuTriggerFor]="contextMenu"
class="context-area">
Right-click anywhere in this area
</div>
<ng-template #contextMenu>
<div cdkMenu>
<button cdkMenuItem>Cut</button>
<button cdkMenuItem>Copy</button>
<button cdkMenuItem>Paste</button>
<hr>
<button cdkMenuItem>Rename</button>
<button cdkMenuItem>Delete</button>
<hr>
<button cdkMenuItem>Properties</button>
</div>
</ng-template>
`
})
export class ContextMenuExample {}/**
* Interface defining menu operations
*/
interface Menu {
/**
* The menu's unique identifier
*/
id: string;
/**
* Focus the first menu item
*/
focusFirstItem(origin?: FocusOrigin): void;
/**
* Focus the last menu item
*/
focusLastItem(origin?: FocusOrigin): void;
}
/**
* Interface for items in the menu stack
*/
interface MenuStackItem {
/**
* The menu instance
*/
menuStack?: MenuStack;
}
/**
* Interface for menu togglers
*/
interface Toggler {
/**
* Toggle the menu open/closed
*/
toggle(): void;
/**
* Whether the menu is open
*/
isOpen(): boolean;
}
/**
* Enum for focus management
*/
enum FocusNext {
nextItem = 'next',
previousItem = 'previous',
currentItem = 'current'
}
/**
* Configuration for menu targeting behavior
*/
interface MenuAimConfig {
/**
* The delay before considering mouse movement as targeting
*/
delay?: number;
/**
* The angle threshold for mouse movement targeting
*/
angleThreshold?: number;
}/**
* Angular module that includes all CDK menu directives and services
*/
class CdkMenuModule {
static forRoot(config?: MenuAimConfig): ModuleWithProviders<CdkMenuModule>;
}