Navbar

Navbar is a ready-made set of blocks and modifiers for building horizontal navigation on the site.

Usage #

Navbar has been designed in every details. Our main goal was to make any navigation without writing CSS code from ready blocks and modifiers. Even the behavior on mobile is already embedded in the module and you do not have to think about it. So, it is necessary to write CSS code only to give a unique appearance.

Let's start with a basic example of navigation on the site.

<div class="is-navbar-container">
    <div class="is-brand">
        <b class="is-logo">Brand</b>
    </div>
    <div class="is-navbar">
        <nav>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

Secondary Navigation #

Just add the additional nav element and make it is-push-right if you need to align the secondary navigation to the right side.

<div class="is-navbar-container">
    <div class="is-brand">
        <b class="is-logo">Brand</b>
    </div>
    <div class="is-navbar">
        <!-- primary navigation -->
        <nav>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
        <!-- secondary navigation -->
        <nav class="is-push-right">
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

Search Form #

<div class="is-navbar-container">
    <div class="is-brand">
        <b class="is-logo">Brand</b>
    </div>
    <div class="is-navbar">
        <nav>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
        <nav class="is-push-right">
            <!-- search form -->
            <form>
                <ul>
                    <li><input type="search" placeholder="Search..."></li>
                </ul>
            </form>
        </nav>
    </div>
</div>

Button #

<div class="is-navbar-container">
    <div class="is-brand">
        <b class="is-logo">Brand</b>
    </div>
    <div class="is-navbar">
        <nav>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
        <nav class="is-push-right">
            <!-- button -->
            <ul>
                <li><a href="#" class="button is-small is-secondary">Sign In</a></li>
            </ul>
        </nav>
    </div>
</div>

Fullwidth #

Use the is-justify modifier to make the navigation items fill the full width of the navbar.

<div class="is-navbar-container">
    <div class="is-navbar">
        <nav class="is-justify">
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

Centered #

Use the is-center modifier to align the navigation to the center.

<div class="is-navbar-container">
    <div class="is-navbar">
        <nav class="is-center">
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

Scrollable #

Just add the is-scrollable class to the navbar container. Now all the items inside it will always be in one line and scrolling will appear if the length of the line is greater than the width of the container.

<div class="is-navbar-container is-scrollable">
    <div class="is-brand">
        <b class="is-logo">Brand</b>
    </div>
    <div class="is-navbar">
        <nav>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

Active State #

Set the is-active modifier to the active state of the navigation item and write some CSS.

// HTML
<div class="is-navbar-container">
    <div class="is-brand">
        <b class="is-logo">Brand</b>
    </div>
    <div class="is-navbar">
        <nav>
            <ul>
                <li class="is-active"><a href="#">...</a></li>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

// CSS
.is-navbar .is-active a {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid red;
    margin-bottom: -2px;
}

Toggle on Mobile #

Add a navigation toggle element to your navbar and make the collapsable navigation on the small screens with the toggle module.

<div class="is-navbar-container">
    <div class="is-brand">
        <b class="is-logo">Brand</b>
        <!-- nav toggle element -->
        <a href="#"
                class="nav-toggle is-push-right-mobile is-shown-mobile icon-kube-menu"
                data-kube="toggle"
                data-target="#navbar-demo"></a>
    </div>
    <!-- collapsable navigation -->
    <div id="navbar-demo" class="is-navbar is-hidden-mobile">
        <nav class="is-push-right">
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>