Menu

API for menu

API reference for Angular Material menu

import {MatMenuModule} from '@angular/material/menu';

Selector: mat-menu

Exported as: matMenu
Properties
Name Description
@Input()

backdropClass: string

Class to be added to the backdrop element.
@Input()

hasBackdrop: boolean | undefined

Whether the menu has a backdrop.
@Input()

overlapTrigger: boolean

Whether the menu should overlap its trigger.
@Input('class')

panelClass: string

This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.
@Input()

xPosition: MenuPositionX

Position of the menu in the X axis.
@Input()

yPosition: MenuPositionY

Position of the menu in the Y axis.
@Output()

closed: EventEmitter<void | 'click' | 'keydown' | 'tab'>

Event emitted when the menu is closed.

direction: Direction

Layout direction of the menu.

parentMenu: MatMenuPanel | undefined

Parent menu of the current menu panel.
@Input()
Deprecated

classList: string

This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.
@Output()
Deprecated

close: this.closed

Event emitted when the menu is closed.
Deprecated

items: QueryList<MatMenuItem>

List of the items inside of a menu.
Methods
focusFirstItem

Focus the first item in the menu.
Parameters

origin

FocusOrigin = 'program'

Action from which the focus originated. Used to set the correct styling.
resetActiveItem

Resets the active item in the menu. This is used when the menu is opened, allowing the user to start from the first option when pressing the down arrow.
setElevation

Sets the menu panel elevation.
Parameters

depth

number

Number of parent menus that come before the menu.

This directive is intended to be used inside an mat-menu tag. It exists mostly to set the role attribute.

Selector: [mat-menu-item]

Exported as: matMenuItem
Properties
Name Description
@Input()

disableRipple: boolean

Whether ripples are disabled.
@Input()

disabled: boolean

Whether the component is disabled.
@Input()

role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox'

ARIA role for the menu item.
Methods
focus

Focuses the menu item.
Parameters

origin

FocusOrigin = 'program'

getLabel

Gets the label to be used when determining whether the option should be focused.
Returns
string

This directive is intended to be used in conjunction with an mat-menu tag. It is responsible for toggling the display of the provided menu instance.

Selector: [mat-menu-trigger-for] [matMenuTriggerFor]

Exported as: matMenuTrigger
Properties
Name Description
@Input('matMenuTriggerFor')

menu: MatMenuPanel<any>

References the menu instance that the trigger is associated with.
@Input('matMenuTriggerData')

menuData: any

Data to be passed along to any lazily-rendered content.
@Output()

menuClosed: EventEmitter<void>

Event emitted when the associated menu is closed.
@Output()

menuOpened: EventEmitter<void>

Event emitted when the associated menu is opened.

dir: Direction

The text direction of the containing app.

menuOpen: boolean

Whether the menu is open.
@Output()
Deprecated

onMenuClose: EventEmitter<void>

Event emitted when the associated menu is closed.
@Output()
Deprecated

onMenuOpen: EventEmitter<void>

Event emitted when the associated menu is opened.
Methods
closeMenu

Closes the menu.
focus

Focuses the menu trigger.
Parameters

origin

FocusOrigin = 'program'

Source of the menu trigger's focus.
openMenu

Opens the menu.
toggleMenu

Toggles the menu between the open and closed states.
triggersSubmenu

Whether the menu triggers a sub-menu or a top-level one.
Returns
boolean

Menu content that will be rendered lazily once the menu is opened.

Selector: ng-template[matMenuContent]

Default mat-menu options that can be overridden.

Properties
Name Description

backdropClass: string

Class to be applied to the menu's backdrop.

hasBackdrop: boolean

Whether the menu has a backdrop.

overlapTrigger: boolean

Whether the menu should overlap the menu trigger.

xPosition: MenuPositionX

The x-axis position of the menu.

yPosition: MenuPositionY

The y-axis position of the menu.

 
type MenuPositionX = 'before' | 'after';

type MenuPositionY = 'above' | 'below';

Injection token that determines the scroll handling while the menu is open.

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

Injection token to be used to override the default options for mat-menu.

const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;