Documentation Index
Fetch the complete documentation index at: https://mintlify.com/angular/components/llms.txt
Use this file to discover all available pages before exploring further.
MatToolbar
The mat-toolbar is a container for headers, titles, or actions. It provides a simple way to create application headers and action bars.
Basic Usage
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'toolbar-example',
imports: [MatToolbarModule, MatButtonModule, MatIconModule],
template: `
<mat-toolbar>
<button mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<span>My Application</span>
<span class="spacer"></span>
<button mat-icon-button>
<mat-icon>favorite</mat-icon>
</button>
</mat-toolbar>
`,
styles: [`
.spacer {
flex: 1 1 auto;
}
`]
})
export class ToolbarExample {}
API Reference
Selector: mat-toolbar
| Name | Type | Default | Description |
|---|
color | string | null | - | Theme color of the toolbar. Supported in M2 themes only, has no effect in M3 themes |
Properties
| Property | Type | Description |
|---|
_toolbarRows | QueryList<MatToolbarRow> | Reference to all toolbar row elements that have been projected |
mat-toolbar-row
Use to create multiple rows within a toolbar.
Examples
@Component({
template: `
<mat-toolbar color="primary">
<button mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<span>Application Title</span>
<span class="spacer"></span>
<button mat-icon-button>
<mat-icon>share</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
</mat-toolbar>
`,
styles: [`
.spacer {
flex: 1 1 auto;
}
`]
})
export class ToolbarIconExample {}
@Component({
template: `
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>First Row</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Second Row</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Third Row</span>
</mat-toolbar-row>
</mat-toolbar>
`
})
export class MultiRowToolbarExample {}
@Component({
template: `
<mat-toolbar color="primary">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>home</mat-icon>
<span>Home</span>
</button>
<button mat-menu-item>
<mat-icon>person</mat-icon>
<span>Profile</span>
</button>
<button mat-menu-item>
<mat-icon>settings</mat-icon>
<span>Settings</span>
</button>
</mat-menu>
<span>My App</span>
<span class="spacer"></span>
<button mat-icon-button>
<mat-icon>account_circle</mat-icon>
</button>
</mat-toolbar>
`,
styles: [`
.spacer {
flex: 1 1 auto;
}
`]
})
export class ToolbarMenuExample {}
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@Component({
imports: [MatToolbarModule, MatIconModule, MatInputModule, MatFormFieldModule],
template: `
<mat-toolbar color="primary">
<button mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<mat-form-field appearance="outline" class="search-field">
<mat-icon matPrefix>search</mat-icon>
<input matInput placeholder="Search">
</mat-form-field>
<span class="spacer"></span>
<button mat-icon-button>
<mat-icon>notifications</mat-icon>
</button>
</mat-toolbar>
`,
styles: [`
.spacer {
flex: 1 1 auto;
}
.search-field {
width: 300px;
margin: 0 16px;
}
`]
})
export class ToolbarSearchExample {}
@Component({
template: `
<mat-toolbar color="primary" class="app-toolbar">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span>My Application</span>
</mat-toolbar>
<mat-sidenav-container class="app-container">
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div class="content">
Main content
</div>
</mat-sidenav-content>
</mat-sidenav-container>
`,
styles: [`
.app-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
.app-container {
position: absolute;
top: 64px;
bottom: 0;
left: 0;
right: 0;
}
.content {
padding: 16px;
}
`]
})
export class AppLayoutExample {}
Styling
The color input applies theme colors (M2 only):
<mat-toolbar color="primary">Primary</mat-toolbar>
<mat-toolbar color="accent">Accent</mat-toolbar>
<mat-toolbar color="warn">Warn</mat-toolbar>
mat-toolbar {
height: 80px;
}
mat-toolbar {
display: flex;
align-items: center;
gap: 16px;
}
.spacer {
flex: 1 1 auto;
}
Accessibility
The toolbar has role="toolbar" by default. For navigation toolbars, consider:
<mat-toolbar role="banner">
<!-- Header content -->
</mat-toolbar>
<button mat-icon-button aria-label="Open navigation menu">
<mat-icon>menu</mat-icon>
</button>
Positioning
mat-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
// Add padding to content to account for toolbar
main {
padding-top: 64px;
}
mat-toolbar {
position: sticky;
top: 0;
z-index: 1000;
}
Best Practices
- Keep it simple: Toolbars work best with 3-5 primary actions
- Use icons: Icon buttons save space and are instantly recognizable
- Consistent placement: Keep navigation on the left, actions on the right
- Responsive design: Consider hiding less important actions on mobile
- Color contrast: Ensure sufficient contrast between toolbar and icons
Theming
@use '@angular/material' as mat;
$theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$violet-palette,
),
));
html {
@include mat.toolbar-theme($theme);
}
// Custom toolbar styles
mat-toolbar {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}