Overview for toolbar

<mat-toolbar> is a container for headers, titles, or actions.

Toolbar overview
My App

In the simplest case, a toolbar may be placed at the top of your application and have a single row that includes the title of your application.

Toolbar with just text
My Application

The Material Design spec used to describe toolbars with multiple rows. This can be done by placing <mat-toolbar-row> elements inside a <mat-toolbar>.

<mat-toolbar-row>
  <span>Custom Toolbar</span>
</mat-toolbar-row>

Note: Placing content outside a <mat-toolbar-row> when multiple rows are specified is not supported.

The toolbar does not perform any positioning of its content. This gives the user full power to position the content as it suits their application.

A common pattern is to position a title on the left with some actions on the right. This can be easily accomplished with display: flex:

<mat-toolbar-row>
  <span>Second Line</span>
  <span class="example-spacer"></span>
  <mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
</mat-toolbar-row>
.example-spacer {
  flex: 1 1 auto;
}

By default, the toolbar assumes that it will be used in a purely decorative fashion and thus sets no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of <div> elements on the page.

Generally, the toolbar is used as a header where role="heading" would be appropriate.

Only if the use-case of the toolbar match that of role="toolbar", the user should add the role and an appropriate label via aria-label or aria-labelledby.

Azure & Blue theme selected.