Navigation
The Navigation component provides a top navigation bar that consists of a logo or brand name and links. For an example, we’re using it at the top of this page. On smaller devices, the links are automatically hidden and a “hamburger” menu icon is shown. On this site, we’re also using the menu component.
Code Example:
<nav>
<div class="nav-container">
<div class="nav-logo">
<a href="/">mustard</a>
</div>
<ul class="nav-links">
<li><a class="active" href="/docs/installation">Docs</a></li>
<li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li><a href="/docs/installation">Docs</a></li>
<li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
</nav>