Vue Material Dashboard Pro

Toolbar

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

Brand

<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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</p>
          </md-list-item>
        </md-list>
      </div>
    </div>
  </div>

</md-toolbar>

Colors

Brand

Brand

Brand

Brand

Brand

Brand

Brand

<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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</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="#dashboard">
            <i class="material-icons">dashboard</i>
            <p class="hidden-lg hidden-md">Dashboard</p>
          </md-list-item>

          <md-list-item href="#user">
            <i class="material-icons">person</i>
            <p class="hidden-lg hidden-md">Profile</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

←