# Toolbar
We re-styled the default toolbar from vuematerial.io and you can easily use this like the example below:
::: demo
<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
::: demo
<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-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