isw-toolbar | Vaadin

Material Design Polymer 2.0 Toolbar.

[ This description is mirrored from at on 2019-05-22 ]


Material Design Polymer 2.0 Toolbar.

Since paper-toolbar is deprecated, and making an app-toolbar MD takes some styling - DRY.

<isw-toolbar rows="2">
  <paper-icon-button slot="nav-icon" icon="menu"></paper-icon-button>

  <span slot="middle">ISW Toolbar Demo</span>

  <paper-icon-button slot="action-icon" icon="search"></paper-icon-button>
  <paper-icon-button slot="action-icon" icon="refresh"></paper-icon-button>
  <paper-icon-button slot="action-icon" icon="more-vert"></paper-icon-button>

  <paper-fab slot="fab" icon="add" mini></paper-fab>


The element uses the isw-responsive-behavior, so its appearance can be controlled by setting the device and orientation attributes...

<isw-toolbar device="tablet" orientation="landscape">
  <span slot="top">ISW Toolbar Demo</span>

... or get responsive by combining with isw-responsive

<isw-responsive device="{{device}}" orientation="{{orientation}}"></isw-responsive>
<isw-toolbar device="[[device]]" orientation="[[orientation]]">
  <span slot="top">ISW Toolbar Demo</span>


The following custom properties are available for styling:

Custom property Default
--isw-toolbar-background --primary-color
--isw-toolbar-font-color --dark-theme-text-color
--isw-toolbar-button-icon-color --dark-theme-text-color
--isw-toolbar-fab-icon-color --dark-theme-text-color

Available mixins:

  • --isw-toolbar-row-mobile
  • --isw-toolbar-row-tablet
  • --isw-toolbar-row-desktop

Default styling via paper-styles properties:

isw-toolbar {
  --primary-color: var(--paper-blue-500);
  --accent-color: var(--paper-cyan-500);

Custom styling:

isw-toolbar {
  --isw-toolbar-background: var(--paper-blue-500);
  --isw-toolbar-font-color: var(--dark-theme-text-color);
  --isw-toolbar-button-icon-color: rgba( 0, 0, 0, 0.54 );
  --isw-toolbar-fab-icon-color: var(--dark-theme-text-color);
  --paper-fab-background: var(--paper-cyan-500);

Elements wrapped with a-tag

Elements with a tags should be properly styled by default. If the fab is mini and wrapped in an a tag, the a tag also needs an mini attribute for correct positioning.

<a slot="fab" href="#" mini>
  <paper-fab icon="add" mini></paper-fab>


Link to this version
ImportedReleased 25 September 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.8



  • PolymerElements/iron-flex-layout#^2.0.0
  • IswPolymerElements/isw-responsive