Skip to main content

​
MatMenu

The mat-menu is a floating panel containing list of menu items. It provides contextual commands with keyboard navigation, focus management, and screen reader support.

​
Basic Usage

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

@Component({
  selector: 'menu-example',
  imports: [MatMenuModule, MatButtonModule],
  template: `
    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
      <button mat-menu-item>Item 3</button>
    </mat-menu>
  `
})
export class MenuExample {}

​
API Reference

​
MatMenu

Selector: mat-menu

​
Inputs

NameTypeDefaultDescription
xPosition'before' | 'after''after'Position of the menu in the X axis
yPosition'above' | 'below''below'Position of the menu in the Y axis
overlapTriggerbooleanfalseWhether the menu should overlap its trigger
hasBackdropboolean | undefined-Whether the menu has a backdrop
backdropClassstring-Class to be added to the backdrop element
panelClassstring-Classes to be added to the overlay panel
classListstring-Deprecated Use panelClass instead
aria-labelstring-Aria label for the menu panel
aria-labelledbystring-Aria labelledby for the menu panel
aria-describedbystring-Aria describedby for the menu panel

​
Outputs

NameTypeDescription
closedEventEmitter<MenuCloseReason>Event emitted when the menu is closed
closeEventEmitter<MenuCloseReason>Deprecated Switch to closed instead

​
Methods

MethodDescription
focusFirstItem(origin?: FocusOrigin): voidFocus the first item in the menu
resetActiveItem(): voidResets the active item in the menu
setPositionClasses(posX?: MenuPositionX, posY?: MenuPositionY): voidAdds classes based on position

​
MatMenuTrigger

Directive: [matMenuTriggerFor]

​
Inputs

NameTypeDefaultDescription
matMenuTriggerForMatMenuPanel-References the menu instance that the trigger is associated with
matMenuTriggerDataany-Data to be passed along to any lazily-rendered content
matMenuTriggerRestoreFocusbooleantrueWhether focus should be restored when the menu is closed

​
Outputs

NameTypeDescription
menuOpenedEventEmitter<void>Event emitted when the associated menu is opened
menuClosedEventEmitter<void>Event emitted when the associated menu is closed
onMenuOpenEventEmitter<void>Deprecated Switch to menuOpened instead
onMenuCloseEventEmitter<void>Deprecated Switch to menuClosed instead

​
Methods

MethodDescription
openMenu(): voidOpens the menu
closeMenu(): voidCloses the menu
toggleMenu(): voidToggles the menu between the open and closed states
updatePosition(): voidUpdates the position of the menu
triggersSubmenu(): booleanWhether the menu triggers a sub-menu or a top-level one

​
Properties

PropertyTypeDescription
menuOpenbooleanWhether the menu is open
dir'ltr' | 'rtl'The text direction of the containing app

​
MatMenuItem

Selector: [mat-menu-item]

​
Inputs

NameTypeDefaultDescription
role'menuitem' | 'menuitemradio' | 'menuitemcheckbox''menuitem'ARIA role for the menu item
disabledbooleanfalseWhether the menu item is disabled
disableRipplebooleanfalseWhether ripples are disabled on the menu item

​
Methods

MethodDescription
focus(origin?: FocusOrigin, options?: FocusOptions): voidFocuses the menu item
getLabel(): stringGets the label to be used when determining whether the option should be focused

​
Examples

​
Nested Menu

@Component({
  template: `
    <button mat-button [matMenuTriggerFor]="animals">Animals</button>
    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>

    <mat-menu #vertebrates="matMenu">
      <button mat-menu-item>Fish</button>
      <button mat-menu-item>Amphibians</button>
      <button mat-menu-item>Reptiles</button>
    </mat-menu>

    <mat-menu #invertebrates="matMenu">
      <button mat-menu-item>Insects</button>
      <button mat-menu-item>Molluscs</button>
    </mat-menu>
  `
})
export class NestedMenuExample {}

@Component({
  template: `
    <button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
    <mat-menu #aboveMenu="matMenu" yPosition="above">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>

    <button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
    <mat-menu #beforeMenu="matMenu" xPosition="before">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
  `
})
export class MenuPositionExample {}

​
Icons in Menu

import { MatIconModule } from '@angular/material/icon';

@Component({
  imports: [MatMenuModule, MatIconModule, MatButtonModule],
  template: `
    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span>Redial</span>
      </button>
      <button mat-menu-item disabled>
        <mat-icon>voicemail</mat-icon>
        <span>Check voice mail</span>
      </button>
      <button mat-menu-item>
        <mat-icon>notifications_off</mat-icon>
        <span>Disable alerts</span>
      </button>
    </mat-menu>
  `
})
export class MenuIconsExample {}

​
Accessibility

​
Keyboard Interaction

  • DOWN_ARROW: Moves focus to the next menu item
  • UP_ARROW: Moves focus to the previous menu item
  • HOME: Moves focus to the first menu item
  • END: Moves focus to the last menu item
  • ENTER: Activates the focused menu item
  • SPACE: Activates the focused menu item
  • ESCAPE: Closes the menu
  • LEFT_ARROW: Closes sub-menu (for LTR languages)
  • RIGHT_ARROW: Opens sub-menu (for LTR languages)

​
ARIA

The menu trigger has role="button", aria-haspopup="menu", aria-expanded, and aria-controls attributes. Each menu item has role="menuitem" by default, which can be customized via the role input.

​
Focus Management

  • When opened via keyboard, focus is placed on the first menu item
  • When opened via mouse, focus remains on the trigger
  • When closed, focus is restored to the trigger by default (configurable via matMenuTriggerRestoreFocus)

​
Theming

The menu component uses the Material Design theming system. Include the menu theme in your application theme: 
@use '@angular/material' as mat;

$theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$violet-palette,
  ),
));

html {
  @include mat.menu-theme($theme);
}

​
Types

type MenuPositionX = 'before' | 'after';

type MenuPositionY = 'above' | 'below';

type MenuCloseReason = void | 'click' | 'keydown' | 'tab';

​
Injection Tokens

​
MAT_MENU_DEFAULT_OPTIONS

const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;

interface MatMenuDefaultOptions {
  xPosition: MenuPositionX;
  yPosition: MenuPositionY;
  overlapTrigger: boolean;
  backdropClass: string;
  overlayPanelClass?: string | string[];
  hasBackdrop?: boolean;
}
Use to configure default options for all menus: 
providers: [
  {
    provide: MAT_MENU_DEFAULT_OPTIONS,
    useValue: {
      overlapTrigger: true,
      xPosition: 'before',
      yPosition: 'below',
      backdropClass: 'custom-backdrop'
    }
  }
]

Build docs developers (and LLMs) love

Get started for freeTalk to us