Design
The vertical menu is available in 3 colors:
- Default version - White version
- Branded version - Blue version
- Inverted version - Graphite version
To hide/close the navigation, apply the .hidden-menu class to the main vertical navigation wrapper (.vertical-nav) to hide it.
Default version - White version
<div class="vertical-nav">
<ul class="nav">
<li><a href="#">Inbox <span class="badge">2</span></a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Sent</a></li>
<li class="disabled"><a href="#">Starred <span class="badge">3</span></a></li>
<li><a href="#">Bin</a></li>
<li><a href="#">All mail <span class="badge">5</span></a></li>
<li class="divider"></li>
<li class="label">Folders</li>
<li><a href="#">Travel</a></li>
<li class="has-children active-child">
<a href="#">Expenses</a>
<ul class="nav">
<li><a href="#">Travel</a></li>
<li class="active"><a href="#">Courses</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
<li><a href="#">Car</a></li>
</ul>
</li>
<li><a href="#">Notes <span class="badge">17</span></a></li>
<li class="show-nav"><a>Show/Hide Menu</a></li>
</ul>
</div>
Branded version - Blue version
The branded version is using the secondary branded color palette for the background color.
<div class="vertical-nav vertical-nav-branded">
<ul class="nav">
...
</ul>
</div>
Inverted version - Graphite version
<div class="vertical-nav vertical-nav-inverted">
<ul class="nav">
...
</ul>
</div>
Partial collapse
To contract/shrink the width instead to hide the navigation list, add the .vertical-nav-collapse class to the main vertical navigation wrapper (.vertical-nav) to indicate that it will contract and not completely hidden when applied the .hidden-menu class.
<div class="vertical-nav vertical-nav-collapse">
<ul class="nav">
...
<li class="show-nav"><a>Show/Hide Menu</a></li>
</ul>
</div>
Vertical navigation with icons
Add the .vertical-nav-icons class to the main vertical navigation wrapper (.vertical-nav) to use icons in the component.
<div class="vertical-nav vertical-nav-icons">
<ul class="nav">
...
</ul>
</div>
Collapse button variations
There are 2 types of collapse buttons available. One is in the examples above, default (.show-nav) and another option presented in the examples below, primary (.show-nav-primary).
<li class="show-nav show-nav-primary"><a>Show/Hide Menu</a></li>