The Navbar component provides a 100% width bar with dropdown links on hover, suitable for main site navigation. At mobile sizes it collapses to a multilevel dropdown. Dropdown functionality is provided by dropdown.js & mobile toggle requires navbar.js

Sass Configuration:

Name Type Default Description
$navbar-height Number 60px Set border on alerts
$navbar-font-stack String $font-stack-header Sets navbar font family
$navbar-font-size Number 16px Set font size of navbar

Example Code:

<!-- Navbar: -->
<div class="navbar-container">
    <div class="branding">
        <a href="#">Logo Here</a>
    </div>
    <nav>
        <div class="nav-mobile"><a id="nav-toggle" href="#">Menu</a></div>

        <ul id="nav-list" class="nav-list">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>

            <li class="dropdown-menu-toggle" data-toggle="dropdown">
                <a href="#">Dropdown Link</a>
                <ul class="dropdown-menu-content">
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                </ul>
            </li>

            <li><a href="#">Link 4</a></li>

            <li class="dropdown-menu-toggle" data-toggle="dropdown">
                <a href="#">Dropdown Link</a>
                <ul class="dropdown-menu-content">
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>