Components

Toolbar

Angular Material Toolbar is a layout container for placing titles, actions, or controls in a consistent header area across the app.

Official docs API reference

Example

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

<mat-toolbar class="gap-x-1">
  <button matIconButton>
    <mat-icon svgIcon="menu" />
  </button>
  <span>My App</span>
  <span class="flex-auto"></span>
  <button matIconButton>
    <mat-icon svgIcon="heart-plus" />
  </button>
  <button matIconButton>
    <mat-icon svgIcon="share" />
  </button>
</mat-toolbar>