Many of the examples below include icons from Font Awesome .
Responsive Navigation Bar
<nav role="navigation" class="ucb-navbar margin-bottom">
<label for="show-menu" class="show-menu" id="show-menu-label">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="element-invisible">Show Menu</span>
</label>
<input type="checkbox" id="show-menu" role="button" aria-controls="site-menu" aria-haspopup="true" aria-labelledby="show-menu-label">
<ul id="site-menu">
<li><a href="#"><i class="fa fa-home"></i> <span class="display-inline invisible-md invisible-lg">Home</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav role="navigation" class="ucb-navbar ucb-navbar-dark margin-bottom">
<label for="show-menu2" class="show-menu" id="show-menu-label2">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="element-invisible">Show Menu</span>
</label>
<input type="checkbox" id="show-menu2" role="button" aria-controls="site-menu2" aria-haspopup="true" aria-labelledby="show-menu-label2">
<ul id="site-menu2">
<li><a href="#"><i class="fa fa-home"></i> <span class="display-inline invisible-md invisible-lg">Home</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Vertical Responsive Navigation Bar
<nav role="navigation" class="ucb-navbar-vertical margin-bottom">
<label for="show-menu3" class="show-menu" id="show-menu-label3">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="element-invisible">Show Menu</span>
</label>
<input type="checkbox" id="show-menu3" role="button" aria-controls="site-menu3" aria-haspopup="true" aria-labelledby="show-menu-labe3">
<ul class="ucb-vnav" id="site-menu3">
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav role="navigation" class="ucb-navbar-vertical ucb-navbar-vertical-dark margin-bottom">
<label for="show-menu4" class="show-menu" id="show-menu-label4">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="element-invisible">Show Menu</span>
</label>
<input type="checkbox" id="show-menu4" role="button" aria-controls="site-menu4" aria-haspopup="true" aria-labelledby="show-menu-labe4">
<ul class="ucb-vnav ucb-vnav-dark" id="site-menu4">
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Flexible Navigation
The Flexible Navigation element is meant for in-content navigation. It is displayed as a horizontal bar on desktop sites, and a vertical list on tablet & mobile.
<ul class="ucb-flexnav">
<li><a href="#">About</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
Vertical Navigation
Use the vertical navigation menu if you have too many items in your main navigation to display them horizontally, or you have a section navigation.
<ul class="ucb-vnav">
<li><a href="#">About</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
Breadcrumbs
Home About History
<nav aria-label="breadcrumb" class="margin-bottom">
<ol class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="active" aria-current="page">History</li>
</ol>
</nav>
You can use a combination of other classes to style the breadcrumb navigation:
Home About History
<nav aria-label="breadcrumb" class="background-gray-dark padding-small text-minify margin-bottom">
<ol class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="active" aria-current="page">History</li>
</ol>
</nav>
