Angular Material Toolbar

By Arvind Rai, October 29, 2022

On this page we will learn to create Material toolbar in our Angular Material application.
1. Angular Material provides <mat-toolbar> component to create toolbar. Toolbar is a container for headers, titles, or actions.
2. Material toolbar can create single or multiple rows. Using <mat-toolbar>, single row is created as following.

<mat-toolbar>
  <span>ConcretePage.com</span>
<mat-toolbar>

3. To create multiple rows within a toolbar, we need to use <mat-toolbar-row> component.

<mat-toolbar>
   <mat-toolbar-row>
     ------
   </mat-toolbar-row>
   <mat-toolbar-row>
     ------
   </mat-toolbar-row>
   ------
</mat-toolbar>

4. To change the color theme, the <mat-toolbar> component has color property that can use primary, accent, or warn values.

<mat-toolbar color="warn">
  ------
<mat-toolbar>

5. To use <mat-toolbar> in our code we need to import following module in our application module.

import { MatToolbarModule } from '@angular/material/toolbar';

Now let us discuss using <mat-toolbar> in detail.

Technologies Used
Creating Single Row with <mat-toolbar>
Color
Style for Positioning Content
Creating Multiple Rows with <mat-toolbar-row>
<mat-toolbar> with <mat-menu>
Toolbar Fixed Top
Complete Example
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0 To create Material toolbar, use <mat-toolbar> component. Here we are creating a toolbar that contains a menu icon and text.

<mat-toolbar>
   <button mat-icon-button>
      <mat-icon>menu</mat-icon>
   </button>
   <span>My App</span>
</mat-toolbar>

UI output:

Color

To change the color theme, use color property of <mat-toolbar> component. The values of color property can be primary, accent, or warn.

<mat-toolbar color="primary">
  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
</mat-toolbar>

UI output:

Style for Positioning Content

The toolbar can contain menu, text and some actions. We may need to keep some items in the left and some items in the right. The <mat-toolbar> does not handle the postioning of items. We have to handle it.
The flex property in CSS can be used to give space between toolbar items.

.toolbar-item-spacer {
    flex: 1 1 auto;
}

Find the code to use above CSS class in our toolbar.

<mat-toolbar color="primary">
  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="toolbar-item-spacer"></span>
  <button mat-icon-button>
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button>
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

UI output:

We can see that menu icon and text items are displayed in left and favorite and share icons are displayed in right. We can create multiple rows within a toolbar using <mat-toolbar-row> within a <mat-toolbar>. A <mat-toolbar-row> creates one row.

<mat-toolbar color="warn">
   <mat-toolbar-row>
      <span>First Line</span>
      <span class="toolbar-item-spacer"></span>
      <button mat-icon-button>
        <mat-icon>favorite</mat-icon>
      </button>
      <button mat-icon-button>
        <mat-icon>share</mat-icon>
      </button>
   </mat-toolbar-row>
   <mat-toolbar-row>
      <span>Second Line</span>
      <span class="toolbar-item-spacer"></span>
      <button mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>
   </mat-toolbar-row>    
</mat-toolbar>

The <mat-menu> is used to create a menu. Find the code to use <mat-toolbar> with <mat-menu>.

<mat-toolbar color="primary">
   <button mat-button [matMenuTriggerFor]="mymenu">
      <button mat-icon-button> <mat-icon>menu</mat-icon> </button>
   </button>
   <mat-menu #mymenu="matMenu">
      <button mat-menu-item>Java</button>
      <button mat-menu-item>Spring</button>
   </mat-menu>    
   <span>ConcretePage.com</span>
   <span class="toolbar-item-spacer"></span>
   <button mat-icon-button>
      <mat-icon>favorite</mat-icon>
   </button>
   <button mat-icon-button>
      <mat-icon>share</mat-icon>
   </button>
</mat-toolbar>

Toolbar Fixed Top

We can fix a toolbar position using CSS. Find the CSS class.

.toolbar-position-fixed {
    position: fixed;
}

Use the CSS class with <mat-toolbar>.

<mat-toolbar color="primary" class="toolbar-position-fixed">
  ------
</mat-toolbar>

Complete Example

app.component.html

<h2>Single Row</h2>

<p>
  <mat-toolbar color="primary">
    <button mat-button [matMenuTriggerFor]="mymenu">
      <button mat-icon-button> <mat-icon>menu</mat-icon> </button>
    </button>
    <mat-menu #mymenu="matMenu">
      <button mat-menu-item>Java</button>
      <button mat-menu-item>Spring</button>
    </mat-menu>    
    <span>ConcretePage.com</span>
    <span class="toolbar-item-spacer"></span>
    <button mat-icon-button>
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>share</mat-icon>
    </button>
  </mat-toolbar>
</p>

<h2>Multiple Rows</h2>

<p>
  <mat-toolbar color="warn">
    <mat-toolbar-row>
      <span>First Line</span>
      <span class="toolbar-item-spacer"></span>
      <button mat-icon-button>
        <mat-icon>favorite</mat-icon>
      </button>
      <button mat-icon-button>
        <mat-icon>share</mat-icon>
      </button>
    </mat-toolbar-row>
    <mat-toolbar-row>
      <span>Second Line</span>
      <span class="toolbar-item-spacer"></span>
      <button mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>
    </mat-toolbar-row>    
  </mat-toolbar>
</p>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatToolbarModule,
    MatIconModule,
    MatMenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.css

.toolbar-item-spacer {
    flex: 1 1 auto;
}

.toolbar-position-fixed {
    position: fixed;
}

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.