To help you get started, we've collected the most common ways that @material/toolbar is being used within popular public projects.

src-zone / material / bundle / src / components / toolbar / mdc.toolbar.directive.ts View on Github

setStyle: (property: string, value: number) => {
            this.renderer.setStyle(this.root.nativeElement, property, value);
        },
        setStyleForTitleElement: (property: string, value: number) => {
            if (this._title)
                this.renderer.setStyle(this._title._elm.nativeElement, property, value);
        },
        setStyleForFlexibleRowElement: (property: string, value: number) => {
            this.renderer.setStyle(this._firstRow._elm.nativeElement, property, value);
        },
        setStyleForFixedAdjustElement: (property: string, value: number) => {
            if (this.fixedAdjust)
                this.renderer.setStyle(this.fixedAdjust._elm.nativeElement, property, value);
        }
    };
    private foundation: { init: Function, destroy: Function } = new MDCToolbarFoundation(this.mdcAdapter);

    constructor(private renderer: Renderer2, private root: ElementRef, private registry: MdcEventRegistry,
        private zone: NgZone) {
    }

    ngAfterViewInit() {
        // Using ngAfterViewInit instead of ngAfterContentInit, because the MDCToolbarFoundation.init
        // uses MdcToolbarAdapter.hasClass on classes that we bind in this component. Those classes are only
        // available after the view is fully initialized.
        // TODO: in other components we just check the property value instead of the class (property based on
        //   the classname given to the adapter), so that ngAfterContentInit can be used after all. That
        //   seems a nicer strategy.
        this._initialized = true;
        this.initFixedScroll();
        this.foundation.init();
    }

View more ways to use @material/toolbar

Important - Deprecation Notice

The existing MDCToolbar component and styles will be removed in a future release. Some of its functionality will be available in the MDC Top App Bar package instead. Bugs and feature requests will no longer be accepted for the mdc-toolbar package. It is recommended that you migrate to the mdc-top-app-bar package to continue to receive new features and updates.

Toolbars

MDC Toolbar acts as a container for multiple rows containing items such as application title, navigation menu, and tabs, among other things. Toolbars scroll with content by default, but support fixed behavior as well.

When using the fixed pattern, a persistent elevation is added to toolbar. When using the waterfall pattern, a toolbar will have no elevation when the page is scrolled to the top, and gain elevation when a user begins to scroll down the page. Toolbars also support anchored only last row at the top behavior. For toolbars with this modifier, only the last row will be anchored at the top, while the rest of toolbar scrolls off.

Flexible behavior can be added to mdc-toolbar, where the height of the toolbar changes as the user scrolls. Flexible is defined as a modifier class of toolbar but not a standalone component. Toolbars using this modifier will have additional height added to their first rows.

Installation

npm install @material/toolbar

Usage

HTML Structure

Wrap the items with mdc-toolbar class in the following way:

<header class="mdc-toolbar">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <a class="material-icons mdc-toolbar__menu-icon" href="#">menu</a>
      <span class="mdc-toolbar__title">Title</span>
    </section>
  </div>
</header>

MDC Toolbars can accommodate multiple rows using the wrapper mdc-toolbar__row:

<header class="mdc-toolbar">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <a class="material-icons mdc-toolbar__menu-icon" href="#">menu</a>
      <span class="mdc-toolbar__title">Title</span>
    </section>
  </div>
  <div class="mdc-toolbar__row">
    ...
  </div>
</header>

Sections

Toolbar sections are aligned to the toolbar's center. You can change this behavior by applying mdc-toolbar__section--align-start or mdc-toolbar__section--align-end to align the sections to the start or the end of the toolbar (respectively).

<header class="mdc-toolbar">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      Section aligns to start.
    </section>
    <section class="mdc-toolbar__section">
      Section aligns to center.
    </section>
    <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
      Section aligns to end.
    </section>
  </div>
</header>

Toolbar sections are laid out using flexbox. Each section will take up an equal amount of space within the toolbar by default. But you can accommodate very long section (very long title) by adding mdc-toolbar__section--shrink-to-fit to other sections.

<div class="mdc-toolbar">
  <div class="mdc-toolbar__row">
      <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
        <span class="mdc-toolbar__title">This is a super super super super long title</span>
      </section>
      <section class="mdc-toolbar__section mdc-toolbar__section--align-end mdc-toolbar__section--shrink-to-fit">
        <a alt="Search" aria-label="Search" class="material-icons search align-icons">search</a>
      </section>
  </div>
</div>

Toolbar title

You can use the mdc-toolbar__title element to style toolbar text representing a page's title, or an application name.

<header class="mdc-toolbar">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section">
      <span class="mdc-toolbar__title">Title</span>
    </section>
  </div>
</header>

Toolbar Icons

Icons can be added as anchor tags, spans, or buttons to mdc-toolbar. There are two types of icons, mdc-toolbar__menu-icon represents the left most icon in mdc-toolbar usually to the left of mdc-toolbar__title. mdc-toolbar__icon represents any icons placed on the right side of an mdc-toolbar.

We recommend using Material Icons from Google Fonts:

However, you can also use SVG, Font Awesome, or any other icon library you wish.

When using SVG icons, ensure you wrap the svg element in an a and include the mdc-toolbar__icon class:

<a class="mdc-toolbar__icon" href="#">
  <svg></svg>
</a>

Fixed toolbars

By default, toolbars scroll with the page content. To keep the toolbar fixed to the top of the screen, add an mdc-toolbar--fixed class to the toolbar element.

Adjusting sibling elements of fixed toolbars

When using mdc-toolbar--fixed, you need to set the margin of the content to prevent toolbar overlaying your content. You can add the mdc-toolbar-fixed-adjust helper class to the toolbar's adjacent sibling element, which will add default margin-top.

When you are using mdc-toolbar with JavaScript, you should assign your content wrapper element to mdc-toolbar's instance property fixedAdjustElement. This will make mdc-toolbar aware of the wrapper class and adjust the margin-top correspondingly.

<header class="mdc-toolbar mdc-toolbar--fixed">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <span class="mdc-toolbar__title">Title</span>
    </section>
  </div>
</header>
<main class="mdc-toolbar-fixed-adjust">
  <p class="demo-paragraph">
    A demo paragraph here.
  </p>
</main>

// When you are using toolbar with JavaScript

Waterfall toolbars (Requires JavaScript)

By adding mdc-toolbar--waterfall to mdc-toolbar--fixed, fixed toolbars become waterfall toolbars. Waterfall toolbar is initially static and has no elevation, and then when the user starts scrolling becomes fixed and gains elevation.

<header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <span class="mdc-toolbar__title">Title</span>
    </section>
  </div>
</header>
<main class="mdc-toolbar-fixed-adjust">
  <p class="demo-paragraph">
    A demo paragraph here.
  </p>
</main>

Fixed Last Row Toolbar (Requires JavaScript)

By adding mdc-toolbar--fixed-lastrow-only to mdc-toolbar--fixed, fixed toolbars will anchor only the last row to the top.

<header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--fixed-lastrow-only">
  <div class="mdc-toolbar__row">
    
  </div>
  <div class="mdc-toolbar__row">
    
  </div>
</header>

Flexible Toolbar (Requires JavaScript)

Flexible behavior can be added to mdc-toolbar, whose height changes as the user scrolls. Flexible behavior is highly customizable - we only define the change of flexible space size without making further assumptions. But we do recommend the height of flexible space should be an integral number of mdc-toolbar__row height and provide a easier way for user to customize height. Users can adjust the height of flexible space through sass variable $mdc-toolbar-ratio-to-extend-flexible or css variable --mdc-toolbar-ratio-to-extend-flexible.

<header class="mdc-toolbar mdc-toolbar--flexible">
  <div class="mdc-toolbar__row">
    ...
  </div>
</header>

Custom height of flexible space:

<style>
  #my-flexible-header {
    --mdc-toolbar-ratio-to-extend-flexible: 3;
  }
</style>
<header class="mdc-toolbar mdc-toolbar--flexible">
  <div class="mdc-toolbar__row">
    ...
  </div>
</header>

Flexible toolbars emit a change custom event with a detail object containing flexibleExpansionRatio property. The flexibleExpansionRatio property is a number from 0-1 representing the ratio of flexible space that has already been collapsed divided by the total amount of flexible space.

toolbar.listen('MDCToolbar:change', function(evt) {
  var flexibleExpansionRatio = evt.detail.flexibleExpansionRatio;
  console.log(flexibleExpansionRatio.toFixed(2));
});

For the most common use case of flexible headers, we've defined a default behavior:

• Flexible has a fixed initial height 4 times the default size of mdc-toolbar__row.
• When it has mdc-toolbar--flexible-default-behavior, it further defines the background and title movement behavior.

<style>
  .mdc-toolbar__row:first-child::after {
    background-image: url("../images/4-3-2.jpg");
    background-size: cover;
    background-position: center;
  }
</style>
<header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
  <div class="mdc-toolbar__row">
    ...
  </div>
</header>

Caveat: Complex animation performance

Due to the nature of having to listen for scroll events and mutate height, this may degrade performance in some mobile browsers. For example, combining high resolution images with parallax scrolling could lead to severe performance issues in certain mobile browsers. When implementing patterns like these for a mobile device, ensure that the image is as optimized as possible and carefully test the performance to make sure that it is adequate.

.mdc-toolbar__row:first-child::after {
  background-image: url("../images/4-3.jpg");
  background-size: cover;
  background-position: center;
}
@media (max-width: 599px) {
  background-image: url("../images/4-3-compressed.jpg");
  background-position: 0 0;
}

RTL Support

mdc-toolbar is automatically RTL-aware, and will re-position elements whenever it, or its ancestors, has a dir="rtl" attribute.

Classes

Block

The block class is mdc-toolbar. This defines the top-level toolbar element.

Element

The component accommodates multiple rows using the wrapper mdc-toolbar__row. For each row, it has mdc-toolbar__section and mdc-toolbar__title elements. You can add multiple sections to toolbar. Refer to Sections and Toolbar title for further details.

Modifier

The provided modifiers are:

Sass Mixins

JS Usage

Including in code

ES Module syntax

import {MDCToolbar, MDCToolbarFoundation} from '@material/toolbar';

CommonJS

const mdcToolbar = require('@material/toolbar');
const MDCToolbar = mdcToolbar.MDCToolbar;
const MDCToolbarFoundation = mdcToolbar.MDCToolbarFoundation;

AMD

require(['/path/to/@material/toolbar'], mdcToolbar => {
  const MDCToolbar = mdcToolbar.MDCToolbar;
  const MDCToolbarFoundation = mdcToolbar.MDCToolbarFoundation;
});

Global

const MDCToolbar = mdc.toolbar.MDCToolbar;
const MDCToolbarFoundation = mdc.toolbar.MDCToolbarFoundation;

Automatic Instantiation

If you do not care about retaining the component instance for the toolbar, simply call attachTo() and pass it a DOM element.

mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar'));

Manual Instantiation

import {MDCToolbar} from '@material/toolbar';

const toolbar = new MDCToolbar(document.querySelector('.mdc-toolbar'));

Using the MDCToolbar Foundation Class

API

Event

Adapter