Components

Angular Material Menu displays a floating panel with a list of actions or options that can be triggered by the user. Items can carry an icon, a keyboard shortcut or a disabled state, dividers group them, and an item can open a submenu that flies out beside the panel. BuilderKit restyles the panel, the items and the hover state so the menu matches the rest of the design system.

The panel is opened from a trigger, which is almost always a button, either a labelled one or a plain icon button.

Example

Below is an example of how BuilderKit restyles the Angular Material Menu and gives it a more modern appearance.

Custom content

Nested menus

<button matButton [matMenuTriggerFor]="animals">Animal index</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>Fishes</button>
  <button mat-menu-item disabled>Amphibians</button>
  <button mat-menu-item>Reptiles</button>
  <button mat-menu-item>Birds</button>
  <button mat-menu-item>Mammals</button>
</mat-menu>

<mat-menu #invertebrates="matMenu">
  <button mat-menu-item>Insects</button>
  <button mat-menu-item>Molluscs</button>
  <button mat-menu-item>Crustaceans</button>
  <mat-divider />
  <button mat-menu-item>Corals</button>
  <button mat-menu-item>Arachnids</button>
  <button mat-menu-item>Velvet worms</button>
  <mat-divider />
  <button mat-menu-item>Horseshoe crabs</button>
</mat-menu>

Menu position

The panel opens below the trigger and aligned to its start edge by default. It can be flipped above it or over to the other edge, which is what keeps a menu inside the viewport near the bottom or the end of the screen.

<button matButton [matMenuTriggerFor]="aboveMenu">Opens above</button>

<mat-menu #aboveMenu="matMenu" yPosition="above">
  <button mat-menu-item>Duplicate</button>
  <button mat-menu-item>Rename</button>
  <button mat-menu-item>Archive</button>
</mat-menu>

<mat-menu #beforeMenu="matMenu" xPosition="before">
  <button mat-menu-item>Duplicate</button>
  <button mat-menu-item>Rename</button>
  <button mat-menu-item>Archive</button>
</mat-menu>