Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/angular/components/llms.txt

Use this file to discover all available pages before exploring further.

The CdkMenu provides behavior for accessible context menus and menu bars.

​
Installation

npm install @angular/cdk

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

​
Basic Menu

<button [cdkMenuTriggerFor]="menu">Open Menu</button>

<ng-template #menu>
  <div class="menu" cdkMenu>
    <button cdkMenuItem>Item 1</button>
    <button cdkMenuItem>Item 2</button>
    <button cdkMenuItem>Item 3</button>
  </div>
</ng-template>

<div cdkMenu>
  <button cdkMenuItem>Regular Item</button>
  
  <button cdkMenuItem [cdkMenuTriggerFor]="submenu">
    With Submenu
  </button>
  
  <ng-template #submenu>
    <div cdkMenu>
      <button cdkMenuItem>Submenu Item 1</button>
      <button cdkMenuItem>Submenu Item 2</button>
    </div>
  </ng-template>
</div>

<div cdkMenuBar>
  <button cdkMenuItem [cdkMenuTriggerFor]="fileMenu">File</button>
  <button cdkMenuItem [cdkMenuTriggerFor]="editMenu">Edit</button>
  <button cdkMenuItem [cdkMenuTriggerFor]="helpMenu">Help</button>
</div>

<ng-template #fileMenu>
  <div cdkMenu>
    <button cdkMenuItem>New</button>
    <button cdkMenuItem>Open</button>
    <button cdkMenuItem>Save</button>
  </div>
</ng-template>

​
API Reference

​
cdkMenu

Container for menu items.

​
cdkMenuItem

Menu item button.

​
cdkMenuTriggerFor

Trigger to open a menu.

​
cdkMenuBar

Container for menu bar.

​
See Also