Components

Menu

Angular Material Menu displays a floating panel with a list of actions or options that can be triggered by the user.

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>