FAB Menu

Overview

MatExpFabMenu and MatExpFabMenuTrigger are directives that style a standard Angular Material FAB button and menu in Material 3 Design System Expressive styles. The FAB trigger opens an overlay menu that lists related actions, with color and shape transitions driven by the open/closed state.

Pre-requisites

Make sure either you have included mat-exp-all-styles, mat-exp-all-buttons-styles, or both individual mixins in your global SCSS styles.

@use '@ngm-dev/mat-exp' as mat-exp;
html {
  @include mat-exp.mat-exp-all-styles();
}

or

@use '@ngm-dev/mat-exp' as mat-exp;
html {
  @include mat-exp.mat-exp-all-buttons-styles();
}

or individually:

@use '@ngm-dev/mat-exp' as mat-exp;
html {
  @include mat-exp.mat-exp-fab-menu-styles();
  @include mat-exp.mat-exp-fab-menu-trigger-styles();
}

Usage

Apply matExpFabMenuTrigger to the FAB button and matExpFabMenu to the <mat-menu>. Pass the same color value to both so the trigger and panel stay in sync.

import { MatExpFabMenu, MatExpFabMenuTrigger } from '@ngm-dev/mat-exp';
import { MatFabButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
@Component({
  selector: 'app-root',
  imports: [
    MatExpFabMenu,
    MatExpFabMenuTrigger,
    MatFabButton,
    MatIcon,
    MatMenu,
    MatMenuItem,
    MatMenuTrigger,
  ],
  templateUrl: './app.component.html',
})
export class App {}

<button
  matFab
  [matMenuTriggerFor]="menu"
  matExpFabMenuTrigger
  #menuTrigger="matMenuTrigger"
  color="primary"
>
  <mat-icon>\{\{ menuTrigger.menuOpen ? 'close' : 'more_vert' \}\}</mat-icon>
</button>
<mat-menu #menu="matMenu" matExpFabMenu color="primary">
  <button mat-menu-item>
    <mat-icon>description</mat-icon>
    Document
  </button>
  <button mat-menu-item>
    <mat-icon>message</mat-icon>
    Message
  </button>
  <button mat-menu-item>
    <mat-icon>folder</mat-icon>
    Folder
  </button>
</mat-menu>

Accessibility

The trigger's shape-morph transition (border-radius, padding-left/padding-right, box-shadow) automatically stops under prefers-reduced-motion: reduce — Angular Material's own matFab host, which matExpFabMenuTrigger is always applied alongside, detects the setting and neutralizes the transition. See Reduced Motion for how this works across the library.

Playground

API

`MatExpFabMenu`

Standalone directive, selector [matExpFabMenu].

You can view the generated API for MatExpFabMenu here.

Host

No static host bindings. MatExpFabMenu instead sets MatMenu.panelClass programmatically via an effect, combining the consumer's original panel class (captured once, before Angular Material's own panelClass setter clears it), mat-exp-fab-menu, and mat-exp-fab-menu-<color>.

Inputs

color uses input().

Types:

• MatExpFabMenuColor (alias of MatExpFabMenuTriggerColor) – 'primary' | 'secondary' | 'tertiary'

`MatExpFabMenuTrigger`

Standalone directive, selector [matExpFabMenuTrigger].

You can view the generated API for MatExpFabMenuTrigger here.

Host

Inputs

color uses input().

Types:

• MatExpFabMenuTriggerColor – 'primary' | 'secondary' | 'tertiary'

Neither directive has an options/provider pattern — set color directly on each element.

Styling

FAB menu exposes two mixins — one for the menu panel and one for the FAB trigger — both of which are included automatically when you call mat-exp-all-styles or mat-exp-all-buttons-styles.

`mat-exp-fab-menu-styles`

Controls the appearance of the menu panel overlay (.mat-exp-fab-menu).

Usage

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-fab-menu-styles($options);
}

Options

`skip-html-element-styles`

Setting this to true means the following styles won't be applied:

• Menu content flex layout (column direction, row gap)
• Menu item alignment based on position (before / after)
• Menu item pill shape (border-radius) and minimum height
• Per-color item background colors

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-fab-menu-styles(
    (
      skip-html-element-styles: true,
    )
  );
}

`colors`

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-fab-menu-styles(
    (
      colors: ('primary'),
    )
  );
}

`mat-exp-fab-menu-trigger-styles`

Controls the appearance of the FAB button that opens the menu (.mat-exp-fab-menu-trigger).

Usage

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-fab-menu-trigger-styles($options);
}

Options

`skip-html-element-styles`

Setting this to true means the following styles won't be applied:

• Shape-morph and color transition animation on the trigger FAB

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-fab-menu-trigger-styles(
    (
      skip-html-element-styles: true,
    )
  );
}

`colors`

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-fab-menu-trigger-styles(
    (
      colors: ('primary'),
    )
  );
}