Toolbar

mat-toolbar for app headers and multi-row layouts.

Basic Toolbar

mat-toolbar with menu icon, title, and right-aligned action icons.

My App
Code
<mat-toolbar color="primary">
  <button mat-icon-button aria-label="Menu">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="rui-flex-1"></span>
  <button mat-icon-button aria-label="Search">
    <mat-icon>search</mat-icon>
  </button>
  <button mat-icon-button aria-label="Account">
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>

Multi-Row Toolbar

Two stacked mat-toolbar rows: one for branding and actions, one for navigation tabs.

My App
Code
<mat-toolbar color="primary">
  <button mat-icon-button aria-label="Menu">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="rui-flex-1"></span>
  <button mat-icon-button>
    <mat-icon>notifications</mat-icon>
  </button>
  <button mat-icon-button>
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>
<mat-toolbar>
  <mat-tab-group class="rui-w-full">
    <mat-tab label="Overview"></mat-tab>
    <mat-tab label="Details"></mat-tab>
    <mat-tab label="Settings"></mat-tab>
  </mat-tab-group>
</mat-toolbar>