Dropdown menu
Dropdown menu
<span class="dropdown">
<span class="btn btn-primary dropdown-toggle">Actions</span>
<ul class="dropdown-menu">
<li><a href="#">Open</a></li>
<li><a href="#">Delete</a></li>
<li class="divider"></li>
<li><a href="#">Add new</a></li>
</ul>
</span>Indicate the current page's location within a navigational hierarchy using breadcrumbs.
<ul class="breadcrumbs">
<li><a href="#">Parent node</a></li>
<li><a href="#">First child node</a></li>
<li>Current node</li>
</ul>Vertical navigation a.k.a sidebar navigation with nestled sub menu support.
.has-children - Indicates if a menu item has children (sub menu)
.current-node - Indicates the currently active parent node
.current - Indicates currently active menu item
<nav>
<a href="#menu-open" id="menu-open" class="hidden-sm hidden-md hidden-lg menu-trigger"><span class="menu-icon"></span></a>
<ul class="nav-aside hidden-xs">
<li><a href="#">Link 1</a></li>
<li class="has-children"><a href="#">Link 2</a></li>
<li class="current-node has-children">
<a href="#">Link 3</a>
<ul class="sub-menu">
<li><a href="#">Sublink 1</a></li>
<li class="current"><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>The navbar is typically used for the main menu. Using the class .nav-justify on the ul element will make the menu items fill the width of the navbar container.
.current - Indicates the currently active menu item
<nav class="navbar">
<div class="container">
<div class="grid">
<div class="grid-sm-12">
<ul class="nav nav-justify">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>
</div>
</nav>Horizontal navigation tabs
.current - The currently active tab
<nav>
<ul class="nav nav-tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
</nav>