API for menu

API reference for Angular CDK menu

import {CdkMenuModule} from '@angular/cdk/menu';

Tracks the last open context menu trigger across the entire application.

Methods
update

Close the previous open context menu and set the given one as being open.

Parameters

trigger

CdkContextMenuTrigger

The trigger for the currently open Context Menu.

MenuStack allows subscribers to listen for close events (when a MenuStackItem is popped off of the stack) in order to perform closing actions. Upon the MenuStack being empty it emits from the empty observable specifying the next focus action which the listener should perform as requested by the closer.

Properties
Name Description

closed: Observable<MenuStackCloseEvent>

Observable which emits the MenuStackItem which has been requested to close.

emptied: Observable<FocusNext | undefined>

Observable which emits when the MenuStack is empty after popping off the last element. It emits a FocusNext event which specifies the action the closer has requested the listener perform.

hasFocus: Observable<boolean>

Observable which emits whether any menu in the menu stack has focus.

id: inject(_IdGenerator).getId('cdk-menu-stack-')

The ID of this menu stack.

Methods
close

Pop items off of the stack up to and including lastItem and emit each on the close observable. If the stack is empty or lastItem is not on the stack it does nothing.

Parameters

lastItem

MenuStackItem

the last item to pop off the stack.

options?

CloseOptions

Options that configure behavior on close.

closeAll

Pop off all MenuStackItems and emit each one on the close observable one by one.

Parameters

options?

CloseOptions

Options that configure behavior on close.

closeSubMenuOf

Pop items off of the stack up to but excluding lastItem and emit each on the close observable. If the stack is empty or lastItem is not on the stack it does nothing.

Parameters

lastItem

MenuStackItem

the element which should be left on the stack

hasInlineMenu

Whether the menu stack is associated with an inline menu.

static
inline

Creates a menu stack that originates from an inline menu.

Parameters

orientation

"horizontal" | "vertical"

inlineMenuOrientation

The orientation of the associated inline menu.

isEmpty

Return true if this stack is empty.

length

Return the length of the stack.

peek

Get the top most element on the stack.

Returns
MenuStackItem | undefined

push

Adds an item to the menu stack.

Parameters

menu

MenuStackItem

the MenuStackItem to put on the stack.

setHasFocus

Sets whether the menu stack contains the focused element.

Parameters

hasFocus

boolean

TargetMenuAim predicts if a user is moving into a submenu. It calculates the trajectory of the user's mouse movement in the current menu to determine if the mouse is moving towards an open submenu.

The determination is made by calculating the slope of the users last NUM_POINTS moves where each pair of points determines if the trajectory line points into the submenu. It uses consensus approach by checking if at least NUM_POINTS / 2 pairs determine that the user is moving towards to submenu.

Methods
initialize

Set the Menu and its PointerFocusTracker.

Parameters

menu

Menu

The menu that this menu aim service controls.

pointerTracker

PointerFocusTracker<FocusableElement & Toggler>

The PointerFocusTracker for the given menu.

toggle

Calls the doToggle callback when it is deemed that the user is not moving towards the submenu.

Parameters

doToggle

() => void

the function called when the user is not moving towards the submenu.

Directive applied to an element which configures it as a MenuBar by setting the appropriate role, aria attributes, and accessible keyboard and mouse handling logic. The component that this directive is applied to should contain components marked with CdkMenuItem.

Selector: [cdkMenuBar]

Exported as: cdkMenuBar
Properties
Name Description
@Input()

id: string

The id of the menu's host element.

isInline: true

Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element).

items: QueryList<CdkMenuItem>

All child MenuItem elements nested in this Menu.

menuStack: MenuStack

The stack of menus this menu belongs to.

nativeElement: HTMLElement

The menu's native DOM host element.

orientation: 'horizontal'

The direction items in the menu flow.

Methods
focusFirstItem

Place focus on the first MenuItem in the menu and set the focus origin.

Parameters

focusOrigin

FocusOrigin = 'program'

The origin input mode of the focus event.

focusLastItem

Place focus on the last MenuItem in the menu and set the focus origin.

Parameters

focusOrigin

FocusOrigin = 'program'

The origin input mode of the focus event.

Directive which configures the element as a Menu which should contain child elements marked as CdkMenuItem or CdkMenuGroup. Sets the appropriate role and aria-attributes for a menu and contains accessible keyboard and mouse handling logic.

It also acts as a RadioGroup for elements marked with role menuitemradio.

Selector: [cdkMenu]

Exported as: cdkMenu
Properties
Name Description
@Input()

id: string

The id of the menu's host element.

@Output()

closed: EventEmitter<void>

Event emitted when the menu is closed.

isInline: !this._parentTrigger

Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element).

items: QueryList<CdkMenuItem>

All child MenuItem elements nested in this Menu.

menuStack: MenuStack

The stack of menus this menu belongs to.

nativeElement: HTMLElement

The menu's native DOM host element.

orientation: 'vertical'

The direction items in the menu flow.

Methods
focusFirstItem

Place focus on the first MenuItem in the menu and set the focus origin.

Parameters

focusOrigin

FocusOrigin = 'program'

The origin input mode of the focus event.

focusLastItem

Place focus on the last MenuItem in the menu and set the focus origin.

Parameters

focusOrigin

FocusOrigin = 'program'

The origin input mode of the focus event.

Abstract directive that implements shared logic common to all menus. This class can be extended to create custom menu types.

Properties
Name Description
@Input()

id: string

The id of the menu's host element.

destroyed: Subject<void>

Emits when the MenuBar is destroyed.

dir: inject(Directionality, { optional: true })

The directionality (text direction) of the current page.

isInline: false

Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element).

items: QueryList<CdkMenuItem>

All child MenuItem elements nested in this Menu.

keyManager: FocusKeyManager<CdkMenuItem>

Handles keyboard events for the menu.

menuAim: inject(MENU_AIM, { optional: true, self: true })

The menu aim service used by this menu.

menuStack: MenuStack

The stack of menus this menu belongs to.

nativeElement: HTMLElement

The menu's native DOM host element.

ngZone: inject(NgZone)

orientation: 'horizontal' | 'vertical'

The direction items in the menu flow.

pointerTracker: PointerFocusTracker<CdkMenuItem>

Tracks the users mouse movements over the menu.

triggerItem: CdkMenuItem

The Menu Item which triggered the open submenu.

Methods
closeOpenMenu

Close the open menu if the current active item opened the requested MenuStackItem.

Parameters

menu

MenuStackItem

The menu requested to be closed.

options?

{ focusParentTrigger?: boolean; }

Options to configure the behavior on close.

  • focusParentTrigger Whether to focus the parent trigger after closing the menu.

focusFirstItem

Place focus on the first MenuItem in the menu and set the focus origin.

Parameters

focusOrigin

FocusOrigin = 'program'

The origin input mode of the focus event.

focusLastItem

Place focus on the last MenuItem in the menu and set the focus origin.

Parameters

focusOrigin

FocusOrigin = 'program'

The origin input mode of the focus event.

Directive which provides the ability for an element to be focused and navigated to using the keyboard when residing in a CdkMenu, CdkMenuBar, or CdkMenuGroup. It performs user defined behavior when clicked.

Selector: [cdkMenuItem]

Exported as: cdkMenuItem
Properties
Name Description
@Input({ alias: 'cdkMenuItemDisabled', transform: booleanAttribute })

disabled: boolean

Whether the CdkMenuItem is disabled - defaults to false

@Input('cdkMenuitemTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during menu typeahead. If not specified, the textContent of the item will be used.

@Output('cdkMenuItemTriggered')

triggered: EventEmitter<void>

If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse event.

closeOnSpacebarTrigger: true

Whether the item should close the menu if triggered by the spacebar.

destroyed: Subject<void>

Emits when the menu item is destroyed.

hasMenu:

Whether the menu item opens a menu.

Methods
focus

Place focus on the element.

getLabel

Get the label for this element which is required by the FocusableOption interface.

Returns
string

getMenu

Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.

Returns
Menu | undefined

the menu if it is open, otherwise undefined.

getMenuTrigger

Get the CdkMenuTrigger associated with this element.

Returns
CdkMenuTrigger | null

isMenuOpen

Return true if this MenuItem has an attached menu and it is open.

trigger

If the menu item is not disabled and the element does not have a menu trigger attached, emit on the cdkMenuItemTriggered emitter and close all open menus.

Parameters

options?

{ keepOpen: boolean; }

Options the configure how the item is triggered

  • keepOpen: specifies that the menu should be kept open after triggering the item.

A directive providing behavior for the "menuitemcheckbox" ARIA role, which behaves similarly to a conventional checkbox.

Selector: [cdkMenuItemCheckbox]

Exported as: cdkMenuItemCheckbox
Properties
Name Description
@Input({ alias: 'cdkMenuItemChecked', transform: booleanAttribute })

checked: boolean

Whether the element is checked

@Input({ alias: 'cdkMenuItemDisabled', transform: booleanAttribute })

disabled: boolean

Whether the CdkMenuItem is disabled - defaults to false

@Input('cdkMenuitemTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during menu typeahead. If not specified, the textContent of the item will be used.

@Output('cdkMenuItemTriggered')

triggered: EventEmitter<void>

If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse event.

hasMenu:

Whether the menu item opens a menu.

Methods
focus

Place focus on the element.

getLabel

Get the label for this element which is required by the FocusableOption interface.

Returns
string

getMenu

Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.

Returns
Menu | undefined

the menu if it is open, otherwise undefined.

getMenuTrigger

Get the CdkMenuTrigger associated with this element.

Returns
CdkMenuTrigger | null

isMenuOpen

Return true if this MenuItem has an attached menu and it is open.

trigger

Toggle the checked state of the checkbox.

Parameters

options?

{ keepOpen: boolean; }

Options the configure how the item is triggered

  • keepOpen: specifies that the menu should be kept open after triggering the item.

A directive providing behavior for the "menuitemradio" ARIA role, which behaves similarly to a conventional radio-button. Any sibling CdkMenuItemRadio instances within the same CdkMenu or CdkMenuGroup comprise a radio group with unique selection enforced.

Selector: [cdkMenuItemRadio]

Exported as: cdkMenuItemRadio
Properties
Name Description
@Input({ alias: 'cdkMenuItemChecked', transform: booleanAttribute })

checked: boolean

Whether the element is checked

@Input({ alias: 'cdkMenuItemDisabled', transform: booleanAttribute })

disabled: boolean

Whether the CdkMenuItem is disabled - defaults to false

@Input('cdkMenuitemTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during menu typeahead. If not specified, the textContent of the item will be used.

@Output('cdkMenuItemTriggered')

triggered: EventEmitter<void>

If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse event.

hasMenu:

Whether the menu item opens a menu.

Methods
focus

Place focus on the element.

getLabel

Get the label for this element which is required by the FocusableOption interface.

Returns
string

getMenu

Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.

Returns
Menu | undefined

the menu if it is open, otherwise undefined.

getMenuTrigger

Get the CdkMenuTrigger associated with this element.

Returns
CdkMenuTrigger | null

isMenuOpen

Return true if this MenuItem has an attached menu and it is open.

trigger

Toggles the checked state of the radio-button.

Parameters

options?

{ keepOpen: boolean; }

Options the configure how the item is triggered

  • keepOpen: specifies that the menu should be kept open after triggering the item.

A directive that turns its host element into a trigger for a popup menu. It can be combined with cdkMenuItem to create sub-menus. If the element is in a top level MenuBar it will open the menu on click, or if a sibling is already opened it will open on hover. If it is inside of a Menu it will open the attached Submenu on hover regardless of its sibling state.

Selector: [cdkMenuTriggerFor]

Exported as: cdkMenuTriggerFor
Properties
Name Description
@Input(cdkMenuTriggerData)

menuData: unknown

Context data to be passed along to the menu template

@Input(cdkMenuPosition)

menuPosition: ConnectedPosition[]

A list of preferred menu positions to be used when constructing the FlexibleConnectedPositionStrategy for this trigger's menu.

@Input(cdkMenuTriggerFor)

menuTemplateRef: TemplateRef<unknown> | null

Template reference variable to the menu this trigger opens

@Output( cdkMenuClosed)

closed: EventEmitter<void>

Emits when the attached menu is requested to close

@Output( cdkMenuOpened)

opened: EventEmitter<void>

Emits when the attached menu is requested to open

injector: inject(Injector)

The DI injector for this component.

Methods
close

Close the opened menu.

getMenu

Get a reference to the rendered Menu if the Menu is open and rendered in the DOM.

Returns
Menu | undefined

isOpen

Whether the attached menu is open.

open

Open the attached menu.

registerChildMenu

Registers a child menu as having been opened by this trigger.

Parameters

child

Menu

toggle

Toggle the attached menu.

A grouping container for CdkMenuItemRadio instances, similar to a role="radiogroup" element.

Selector: [cdkMenuGroup]

Exported as: cdkMenuGroup

Base class providing checked state for selectable MenuItems.

Properties
Name Description
@Input({ alias: 'cdkMenuItemChecked', transform: booleanAttribute })

checked: boolean

Whether the element is checked

@Input({ alias: 'cdkMenuItemDisabled', transform: booleanAttribute })

disabled: boolean

Whether the CdkMenuItem is disabled - defaults to false

@Input('cdkMenuitemTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during menu typeahead. If not specified, the textContent of the item will be used.

@Output('cdkMenuItemTriggered')

triggered: EventEmitter<void>

If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse event.

closeOnSpacebarTrigger: false

Whether the item should close the menu if triggered by the spacebar.

hasMenu:

Whether the menu item opens a menu.

Methods
focus

Place focus on the element.

getLabel

Get the label for this element which is required by the FocusableOption interface.

Returns
string

getMenu

Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.

Returns
Menu | undefined

the menu if it is open, otherwise undefined.

getMenuTrigger

Get the CdkMenuTrigger associated with this element.

Returns
CdkMenuTrigger | null

isMenuOpen

Return true if this MenuItem has an attached menu and it is open.

trigger

If the menu item is not disabled and the element does not have a menu trigger attached, emit on the cdkMenuItemTriggered emitter and close all open menus.

Parameters

options?

{ keepOpen: boolean; }

Options the configure how the item is triggered

  • keepOpen: specifies that the menu should be kept open after triggering the item.

A directive that opens a menu when a user right-clicks within its host element. It is aware of nested context menus and will trigger only the lowest level non-disabled context menu.

Selector: [cdkContextMenuTriggerFor]

Exported as: cdkContextMenuTriggerFor
Properties
Name Description
@Input({ alias: 'cdkContextMenuDisabled', transform: booleanAttribute })

disabled: boolean

Whether the context menu is disabled.

@Input(cdkContextMenuTriggerData)

menuData: unknown

Context data to be passed along to the menu template

@Input(cdkContextMenuPosition)

menuPosition: ConnectedPosition[]

A list of preferred menu positions to be used when constructing the FlexibleConnectedPositionStrategy for this trigger's menu.

@Input(cdkContextMenuTriggerFor)

menuTemplateRef: TemplateRef<unknown> | null

Template reference variable to the menu this trigger opens

@Output( cdkContextMenuClosed)

closed: EventEmitter<void>

Emits when the attached menu is requested to close

@Output( cdkContextMenuOpened)

opened: EventEmitter<void>

Emits when the attached menu is requested to open

injector: inject(Injector)

The DI injector for this component.

Methods
close

Close the currently opened context menu.

isOpen

Whether the attached menu is open.

open

Open the attached menu at the specified location.

Parameters

coordinates

ContextMenuCoordinates

where to open the context menu

registerChildMenu

Registers a child menu as having been opened by this trigger.

Parameters

child

Menu

Abstract directive that implements shared logic common to all menu triggers. This class can be extended to create custom menu trigger types.

Properties
Name Description

childMenu: Menu

The child menu opened by this trigger.

closed: EventEmitter<void>

Emits when the attached menu is requested to close

destroyed: Subject<void>

Emits when this trigger is destroyed.

injector: inject(Injector)

The DI injector for this component.

menuData: unknown

Context data to be passed along to the menu template

menuPosition: ConnectedPosition[]

A list of preferred menu positions to be used when constructing the FlexibleConnectedPositionStrategy for this trigger's menu.

menuScrollStrategy: inject(MENU_SCROLL_STRATEGY)

Function used to configure the scroll strategy for the menu.

menuStack: MenuStack

The menu stack in which this menu resides.

menuTemplateRef: TemplateRef<unknown> | null

Template reference variable to the menu this trigger opens

opened: EventEmitter<void>

Emits when the attached menu is requested to open

overlayRef: OverlayRef | null

A reference to the overlay which manages the triggered menu

stopOutsideClicksListener: merge(this.closed, this.destroyed)

Emits when the outside pointer events listener on the overlay should be stopped.

viewContainerRef: inject(ViewContainerRef)

The view container ref for this component

Methods
getMenuContentPortal

Get the portal to be attached to the overlay which contains the menu. Allows for the menu content to change dynamically and be reflected in the application.

isElementInsideMenuStack

Whether the given element is inside the scope of this trigger's menu stack.

Parameters

element

Element

The element to check.

isOpen

Whether the attached menu is open.

registerChildMenu

Registers a child menu as having been opened by this trigger.

Parameters

child

Menu

CdkTargetMenuAim is a provider for the TargetMenuAim service. It can be added to an element with either the cdkMenu or cdkMenuBar directive and child menu items.

Selector: [cdkTargetMenuAim]

Exported as: cdkTargetMenuAim

PointerFocusTracker keeps track of the currently active item under mouse focus. It also has observables which emit when the users mouse enters and leaves a tracked element.

Properties
Name Description

activeElement: T

The element currently under mouse focus.

entered: Observable<T>

Emits when an element is moused into.

exited: Observable<T>

Emits when an element is moused out.

previousElement: T

The element previously under mouse focus.

Methods
destroy

Stop the managers listeners.

Item to track for mouse focus events.

A single item (menu) in the menu stack.

Properties
Name Description

menuStack: MenuStack

A reference to the menu stack this menu stack item belongs to.

Options that can be provided to the close or closeAll methods.

Properties
Name Description

focusNextOnEmpty: FocusNext

The element to focus next if the close operation causes the menu stack to become empty.

focusParentTrigger: boolean

Whether to focus the parent trigger after closing the menu.

Event dispatched when a menu is closed.

Properties
Name Description

focusParentTrigger: boolean

Whether to focus the parent trigger after closing the menu.

item: MenuStackItem

The menu being closed.

Interface which specifies Menu operations and used to break circular dependency issues

Properties
Name Description

id: string

The id of the menu's host element.

nativeElement: HTMLElement

The menu's native DOM host element.

orientation: 'horizontal' | 'vertical'

The direction items in the menu flow.

Methods
focusFirstItem

Place focus on the first MenuItem in the menu.

Parameters

focusOrigin

FocusOrigin

focusLastItem

Place focus on the last MenuItem in the menu.

Parameters

focusOrigin

FocusOrigin

MenuAim is responsible for determining if a sibling menuitem's menu should be closed when a Toggler item is hovered into. It is up to the hovered in item to call the MenuAim service in order to determine if it may perform its close actions.

Methods
initialize

Set the Menu and its PointerFocusTracker.

Parameters

menu

Menu

The menu that this menu aim service controls.

pointerTracker

PointerFocusTracker<FocusableElement & Toggler>

The PointerFocusTracker for the given menu.

toggle

Calls the doToggle callback when it is deemed that the user is not moving towards the submenu.

Parameters

doToggle

() => void

the function called when the user is not moving towards the submenu.

An element which when hovered over may open or close a menu.

Methods
getMenu

Gets the open menu, or undefined if no menu is open.

Returns
Menu | undefined

The coordinates where the context menu should open.

type ContextMenuCoordinates = {
    x: number;
    y: number;
};

Injection token used for an implementation of MenuStack.

const MENU_TRIGGER: InjectionToken<CdkMenuTriggerBase>;

Injection token used to configure the behavior of the menu when the page is scrolled.

const MENU_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

Injection token used for an implementation of MenuStack.

const MENU_STACK: InjectionToken<MenuStack>;

Provider that provides the parent menu stack, or a new menu stack if there is no parent one.

const PARENT_OR_NEW_MENU_STACK_PROVIDER: { provide: InjectionToken<MenuStack>; deps: Optional[][]; useFactory: (parentMenuStack?: MenuStack) => MenuStack; };

Provider that provides the parent menu stack, or a new inline menu stack if there is no parent one.

const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER: (orientation: "horizontal" | "vertical") => { provide: InjectionToken<MenuStack>; deps: Optional[][]; useFactory: (parentMenuStack?: MenuStack) => MenuStack; };

Injection token used to return classes implementing the Menu interface

const CDK_MENU: InjectionToken<Menu>;

Injection token used for an implementation of MenuAim.

const MENU_AIM: InjectionToken<MenuAim>;
Azure & Blue theme selected.