Navigation

Documentation and examples for how to use Orangeline’s navigation components.

Navbar

				
<nav class="navbar">
    <ul>
        <li>
            <a class="logo" href="http://knightlab.com">
                <img src="assets/knightlab-dark.png" />
            </a>
        </li>
    </ul>
    <ul class="navbar-nav">
        <li><a class="button" href="">Overview</a></li>
        <li><a class="button" href="">Timeline Creator</a></li>
        <li><a class="button" href="">Examples</a></li>
    </ul>
</nav>

Sub-Navigation

				
<nav class="navbar navbar-subnav">
    <ul>
        <li><a class="button" href="">Overview</a></li>
        <li><a class="button" href="">Timeline Creator</a></li>
        <li><a class="button" href="">Examples</a></li>
        <li><a class="button" href="">Help</a></li>
        <li><a class="button" href="">Documentation</a></li>
    </ul>
</nav>

Product Navbar

Main navigation for the top of Knight Lab pages.

Handlebars

A partial can be used for handlebars called > navbar-product-top.

				
<nav id="navbar-product-top" class="navbar navbar-dark">
    <ul>
        <li class="logo">
            <a href="http://knightlab.com">
                <img src="assets/knightlab-dark.png" />
            </a>
        </li>
    </ul>
    <ul class="nav-right">
        <li><a class="button button-dark" href="#overview">Projects</a></li>
        <li><a class="button button-dark" href="#examples">Class</a></li>
        <li><a class="button button-dark" href="#examples">Blog</a></li>
        <li><a class="button button-dark" href="#make">Community</a></li>
        <li><a class="button button-dark" href="#help">About</a></li>
    </ul>
</nav>