Toolbar | Vue Material Kit PRO

We re-styled the default toolbar from vuematerial.io and you can easily use this like the example below:

# Colors

<md-toolbar class="md-primary">
  <div class="md-toolbar-row">
    <div class="md-toolbar-section-start">
      <h3 class="md-title">Brand</h3>
    </div>
    <div class="md-toolbar-section-end">
      <md-button class="md-just-icon md-simple md-toolbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </md-button>

      <div class="md-collapse">
        <md-list>
          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>

          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>
</md-toolbar>
<md-toolbar class="md-rose">
  <div class="md-toolbar-row">
    <div class="md-toolbar-section-start">
      <h3 class="md-title">Brand</h3>
    </div>
    <div class="md-toolbar-section-end">
      <md-button class="md-just-icon md-simple md-toolbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </md-button>

      <div class="md-collapse">
        <md-list>
          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>

          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>
</md-toolbar>
<md-toolbar class="md-danger">
  <div class="md-toolbar-row">
    <div class="md-toolbar-section-start">
      <h3 class="md-title">Brand</h3>
    </div>
    <div class="md-toolbar-section-end">
      <md-button class="md-just-icon md-simple md-toolbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </md-button>

      <div class="md-collapse">
        <md-list>
          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>

          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>

</md-toolbar>
<md-toolbar class="md-warning">
  <div class="md-toolbar-row">
    <div class="md-toolbar-section-start">
      <h3 class="md-title">Brand</h3>
    </div>
    <div class="md-toolbar-section-end">
      <md-button class="md-just-icon md-simple md-toolbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </md-button>

      <div class="md-collapse">
        <md-list>
          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>

          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>

</md-toolbar>
<md-toolbar class="md-success">
  <div class="md-toolbar-row">
    <div class="md-toolbar-section-start">
      <h3 class="md-title">Brand</h3>
    </div>
    <div class="md-toolbar-section-end">
      <md-button class="md-just-icon md-simple md-toolbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </md-button>

      <div class="md-collapse">
        <md-list>
          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>

          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>

</md-toolbar>
<md-toolbar class="md-info">
  <div class="md-toolbar-row">
    <div class="md-toolbar-section-start">
      <h3 class="md-title">Brand</h3>
    </div>
    <div class="md-toolbar-section-end">
      <md-button class="md-just-icon md-simple md-toolbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </md-button>

      <div class="md-collapse">
        <md-list>
          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>

          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>

</md-toolbar>
<md-toolbar>
  <div class="md-toolbar-row">
    <div class="md-toolbar-section-start">
      <h3 class="md-title">Brand</h3>
    </div>
    <div class="md-toolbar-section-end">
      <md-button class="md-just-icon md-simple md-toolbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </md-button>

      <div class="md-collapse">
        <md-list>
          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>

          <md-list-item href="javascript:void(0)">
            <p>Link</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>

</md-toolbar>

Note: for more details about toolbar please see the Toolbar section from vuematerial.io

← Badge V-Popover →