Navigations
Simple Navigation Bar
<ul class="nav">
<li class="nav-item -active"><a href="" class="link">Active Nav Item 1</a></li>
<li class="nav-item"><a href="" class="link">Hovered Nav Item 2</a></li>
<li class="nav-item"><a href="" class="link">Nav Item 3</a></li>
<li class="nav-item"><a href="" class="link">Nav Item 4</a></li>
<li class="nav-item disabled"><a href="" class="link">Disabled Nav Item 5</a></li>
</ul>
Vertical Simple Navigation Bar
<ul class="nav nav-vertical">
...
</ul>
Notice:
This is the simplest navigation bar that comes in both horizontal and vertical stackable list. It behaves exactly like a link except for the active tab.
Tab Navigation
<ul class="tab-nav">
<li class="tab-item -active"><a href="javascript:void(0);" class="link">Active Tab 1</a></li>
<li class="tab-item"><a href="javascript:void(0);" class="link">Hovered Tab Item 2</a></li>
<li class="tab-item"><a href="javascript:void(0);" class="link">Tab Item 3</a></li>
<li class="tab-item"><a href="javascript:void(0);" class="link">Tab Item 4</a></li>
<li class="tab-item disabled"><a href="javascript:void(0);" class="link">Disabled Tab Item 5</a></li>
</ul>
Vertical Left Tab Navigation
<ul class="tab-nav tab-vertical -left">
...
</ul>
Vertical Right Tab Navigation
<ul class="tab-nav tab-vertical -right">
...
</ul>
Dropdown Menu
Create dropdown menu for a navigation item. Whenever needed, consider add class -has-dropdown into nav-item. When the nav-item is clicked on, class -open will be added to display the dropdown-menu.
<ul class="nav">
<li class="nav-item -has-dropdown -open -left">
<a href="javascript:void(0);" class="link">Nav Item Left</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="javascript:void(0);" class="link">Super tight item</a></li>
<li class="dropdown-item"><a href="javascript:void(0);" class="link">Super rad item</a></li>
<li class="dropdown-item -divider"></li>
<li class="dropdown-item"><a href="javascript:void(0);" class="link">Item chilling by itself</a></li>
</ul>
</li>
<li class="nav-item -has-dropdown -open -right">
...
</li>
</ul>
Notice:
Dropdown list should be used considerably because of its bad UX nature of hiding contents.