Navigation
Navigation menus provide easy access to different areas in a website or application.
| Class | Type | |
|---|---|---|
side-nav
|
Sidebar Navigation | A class representing a sidebar |
<div class="side-nav">
<div class="side-nav-level-1">
<div class="side-nav-main">
<section class="drop-section">
<ul class="drop-list">
<li class="drop-list-item">
<a class="drop-button is-selected" href="">
<span class="icon-home" aria-hidden="true"></span>
<span class="text">Menu item</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="">
<span class="icon-user-group" aria-hidden="true"></span>
<span class="text">Menu item</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="">
<span class="icon-bell" aria-hidden="true"></span>
<span class="text">Menu item</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="">
<span class="icon-chart-pie" aria-hidden="true"></span>
<span class="text">Menu item</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="">
<span class="icon-document" aria-hidden="true"></span>
<span class="text">Menu item</span>
</a>
</li>
</ul>
</section>
</div>
<div class="side-nav-bottom">
<section class="drop-section">
<a class="drop-button" href="">
<span class="icon-cog" aria-hidden="true"></span>
<span class="text">Menu item</span>
</a>
</section>
</div>
</div>
</div>