Navbar

This module helps organize the main navigation into a navbar.

Usage #

The Navbar module helps to create containers without writing CSS code, in which you can put different navigation modules. Technically, the navbar class is a flex container, with flex blocks inside and with vertical alignment in them.


<div class="navbar">
    <div class="navbar-container">
        <div class="navbar-brand">
            <a href="#" class="brand">...</a>
        </div>
        <div class="navbar-nav flex-auto">
            <nav class="nav nav-centered">...</nav>
        </div>
        <div class="navbar-action">
            <a href="#" class="button button-primary button-small">...</a>
        </div>
    </div>
</div>

Here's an example of navigation pushed to the right edge of the navbar.


<div class="navbar">
    <div class="navbar-container">
        <div class="navbar-brand">
            <a href="#" class="brand">...</a>
        </div>
        <div class="navbar-nav push-right">
            <nav class="nav nav-right">...</nav>
        </div>
    </div>
</div>

Here's how to place the search input in the navbar.


<div class="navbar">
    <div class="navbar-container">
        <div class="navbar-brand">
            <a href="#" class="brand">
                <svg...>
            </a>
        </div>
        <div class="navbar-nav ml-6">
            <nav class="nav">... </nav>
        </div>
        <div class="navbar-search push-right">
            <input type="search" class="input input-small input-round" placeholder="Search..." />
        </div>
    </div>
</div>

Size #

By default, navbar-container is 16rem in height (i.e. 64px). You can change the height of the navbar by specifying a variable in your CSS/SCSS.


.navbar-custom {
    --navbar-height: 20rem;
}

<div class="navbar navbar-custom">
    <div class="navbar-container">...</div>
</div>

Responsive #

The best strategy for creating responsive navigation is to make different navigation modules for different screens. This is a way that doesn't complicate the code and makes it easier to create navigation differences for various screens.

So we create navigation for normal screens and duplicate it for mobile screens, making the necessary changes. In the example below, the navigation becomes a vertical menu on small screens and opens when you click on the burger icon.

Note: Superkube is a javascript-agnostic framework, so it does not provide a way to hide or show something by clicking.


// Navigation visible for all screens except small screens
<div class="navbar hidden-sm">
    <div class="navbar-container">
        <div class="navbar-brand">
            <a href="#" class="brand">...</a>
        </div>
        <div class="navbar-nav flex-auto">
            <nav class="nav nav-centered">...</nav>
        </div>
        <div class="navbar-action">
            <a href="#" class="button button-primary button-small">...</a>
        </div>
    </div>
</div>

// Navigation for small screens only
<div class="navbar visible-sm">
    <div class="navbar-container">
        <div class="navbar-brand">
            <a href="#" class="brand">...</a>
        </div>
        <div class="navbar-trigger push-right">
            <a href="#">
                <svg...>
            </a>
        </div>
    </div>
    <nav class="menu menu-stacked mt-4 p-4 bg-silver">
        <ul class="menu-list">
            <li class="menu-item">
                <a href="#" class="menu-link">...</a>
            </li>
            <li class="menu-item pt-2">
                <a href="#" class="button button-primary button-small">...</a>
            </li>
        </ul>
    </nav>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// params
--navbar-height: 16rem;