Modules

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">
                <svg...>
            </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">
                <svg...>
            </a>
        </div>
        <div class="navbar-nav ml-auto">
            <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 ml-auto">
            <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). This can be changed using the modifiers of the Sizing module.


<div class="navbar bg-dark">
    <div class="navbar-container h-20">...</div>
</div>

You can also change the height of the navbar by specifying a variable in CSS.


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

And by applying the created modifier in HTML:


<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">
                <svg...>
            </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">
                <svg...>
            </a>
        </div>
        <div class="navbar-trigger ml-auto">
            <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>