← Superkube / Documentation 2.1.1
Modules

Nav

This module helps to create different horizontal navigation.

Usage #

The nav is a list of items and links, wrapped in nav tag with a nav class.


<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">...</a>
        </li>
    </ul>
</nav>

Active state

Set the active class for the nav item to make it active.


<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item active">
            <a href="#" class="nav-link">...</a>
        </li>
    </ul>
</nav>

Scales #

By default, the nav has a 14px font size and one modifier for changing the size.

  • nav-small — 13px

<nav class="nav nav-small">...</nav>

Add or change scale

You can add your own size or change an existing one by extending the type scale in $scales. See also how to work with text size scales for modules.


// =Scales
$scales: map-extend($scales, (
    type: (
        nav: (
            default: 16px, // change existing size
            large: 18px // add new size
        )
    )
));

In this case, Superkube will automatically generate the nav-large modifier and change the default nav with new value of text size.


<nav class="nav nav-large">...</nav>

Weight #

The nav module has two modifiers to change the font weight.

  • nav-semibold
  • nav-strong

<nav class="nav nav-strong">...</nav>

Underline #

By default, links in nav items do not have an underline. The nav-underline modifier turns on the underline in links.


<nav class="nav nav-underline">...</nav>

Underline off

By default, when you hover over the links in the nav, they have an underline. The nav-underline-off modifier disables the underline on hover.


<nav class="nav nav-underline-off">...</nav>

Colors #

The nav module has several link color modifiers.

Muted

The nav-muted modifier makes links muted. This is useful, for example, in the footer nav.


<nav class="nav nav-muted">...</nav>

Primary

The nav-primary modifier makes links with primary colors.


<nav class="nav nav-primary">...</nav>

Light

The nav-light modifier makes links with light colors. This is useful, for example, on dark backgrounds.


<nav class="nav nav-light">...</nav>

Custom colors

For the nav module, you can change existing colors or add a new color modifier. See also how to work with colors for modules.

Each nav variant has a link color setting and three states base, hover, and active. These values can be changed by extending $colors.


// =Colors
$colors: map-extend($colors, (
    nav: (
        default: (
            item: (
                active: (
                    link: (
                        color: palette(black-o, 40)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(black)
                ),
                hover: (
                    color: palette(black-o, 60)
                )
            )
        )
    )
));

In the example above for the nav, the default color of the links has been changed to blue, and changed to black on hover.

You can create your own link color modifier by extending $colors.


// =Colors
$colors: map-extend($colors, (
    nav: (
        accent: (
            item: (
                active: (
                    link: (
                        color: palette(black-o, 40)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(negative, dark)
                ),
                hover: (
                    color: palette(black)
                )
            )
        )
    )
));

As a result, you will get a new color modifier with automatically generated colors for the nav links.


<nav class="nav nav-accent">...</nav>

Features #

The nav module can work with other modules. Here are some typical examples.

Badge

Using the Badge module it is possible to place the indicator in the nav.


<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">Services</a>
            <span class="badge badge-important ml-1">3</span>
        </li>
    </ul>
</nav>

Icon

Using the Icon module it is possible to place an icon in the nav.


<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span class="icon icon-16 ml-1">
                    <svg...>
                </span>
                <span>About</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span>Services</span>
                <span class="icon icon-16 mr-1">
                    <svg...>
                </span>
            </a>
        </li>
    </ul>
</nav>

Caret

Using the Caret module it is possible to place a caret in the nav. For example, to expand a dropdown.


<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">Services</a>
            <span class="caret"></span>
        </li>
    </ul>
</nav>

Centered #

Use the nav-centered class to center the nav horizontally.


<nav class="nav nav-centered">...</nav>

Right #

Use the nav-right and ml-auto to push the nav to the right of the flex container.


<div class="flex">
    <nav class="nav nav-right ml-auto">...</nav>
</div>

Full #

Use the nav-full modifier to make the nav items fill the entire container width.


<nav class="nav nav-full">...</nav>

Responsive #

Overflow

The nav-overflow-sm modifier on small screens will show a scroll if the nav items are beyond the width of the container.


<nav class="nav nav-overflow-sm">...</nav>

Menu

The nav-menu-sm modifier will change the horizontal nav to a vertical menu on small screens.


<nav class="nav nav-menu-sm">...</nav>

Uncentered

The nav-uncentered-sm modifier will make the centered nav uncentered on small screens.


<nav class="nav nav-centered nav-uncentered-sm">...</nav>

Variants #

Variants help you change the different properties of a module. For example, the spacing between menu items, padding, and so on. This can be done by extending the $variants map and setting new values in it. See also how to work with variants of modules.

Here is an example of how to increase the distance between items using $variants.


// =Variants
$variants: map-extend($variants,
    nav: (
        default: (
            item: (
                margin-right: 8rem
            )
        )
    )
));

Pills #

The nav-pills modifier makes nav links with a background on hover and when active.


<nav class="nav nav-pills">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">...</a>
        </li>
    </ul>
</nav>

You can change the parameters and colors of the nav-pills modifier by extending $variants and $colors. Below are all the parameters and colors of the modifier and how and can be extended.


// =Variants
$variants: map-extend($variants,
    nav: (
        pills: (
            item: (
                margin-right: 1rem
            ),
            link: (
                padding: 7px 16px,
                border-radius: 99px
            )
        )
    )
));

// =Colors
$colors: map-extend($colors, (
    nav: (
        pills: (
            item: (
                active: (
                    link: (
                        background-color: palette(black),
                        color: palette(neutral, lightest)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(black)
                ),
                hover: (
                    background-color: palette(black-o, 10)
                )
            )
        )
    )
));

Tabs #

The nav-tabs modifier makes nav links as tabs.


<nav class="nav nav-tabs">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">...</a>
        </li>
    </ul>
</nav>

You can change the parameters and colors of the nav-tabs modifier by extending $variants and $colors. Below are all the parameters and colors of the modifier and how and can be extended.


// =Variants
$variants: map-extend($variants,
    nav: (
        tabs: (
            list: (
                border-bottom-width: 2px
            ),
            item: (
                margin-right: 1px
            ),
            link: (
                border-bottom-width: 2px,
                margin-bottom: -2px,
                padding: 12px 12px 10px 12px
            )
        )
    )
));

// =Colors
$colors: map-extend($colors, (
    nav: (
        tabs: (
            list: (
                border-bottom-color: palette(black-o, 10)
            ),
            item: (
                active: (
                    link: (
                        background-color: transparent,
                        color: palette(black),
                        border-bottom-color: palette(black)
                    )
                )
            ),
            link: (
                base: (
                    background-color: transparent,
                    color: palette(black-o, 50),
                    border-bottom-color: transparent
                ),
                hover: (
                    background-color: palette(neutral, lightest),
                    color: palette(black),
                    border-bottom-color: palette(black)
                )
            )
        )
    )
));

Variables #

The default properties and colors of the module are shown below. These are all specified in the source SCSS variables. This is here for clarity and to simplify modification and overriding of values


// =Type
$scales: (
    type: (
        nav: (
            small: 13px,
            default: 14px
        )
    )
);

// =Colors
$colors: (
    nav: (
        default: (
            item: (
                active: (
                    link: (
                        color: palette(black-o, 40)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(black)
                ),
                hover: (
                    color: palette(black-o, 60)
                )
            )
        ),
        primary: (
            item: (
                active: (
                    link: (
                        color: palette(black-o, 40)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(primary, dark)
                ),
                hover: (
                    color: palette(primary, darker)
                ),
            )
        ),
        light: (
            item: (
                active: (
                    link: (
                        color: palette(white-o, 50)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(white-o, 80)
                ),
                hover: (
                    color: palette(white)
                )
            )
        ),
        muted: (
            item: (
                active: (
                    link: (
                        color: palette(black)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(black-o, 60)
                ),
                hover: (
                    color: palette(black)
                )
            )
        ),
        pills: (
            item: (
                active: (
                    link: (
                        background-color: palette(black),
                        color: palette(neutral, lightest)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(black)
                ),
                hover: (
                    background-color: palette(black-o, 10)
                )
            )
        ),
        tabs: (
            list: (
                border-bottom-color: palette(black-o, 10)
            ),
            item: (
                active: (
                    link: (
                        background-color: transparent,
                        color: palette(black),
                        border-bottom-color: palette(black)
                    )
                )
            ),
            link: (
                base: (
                    background-color: transparent,
                    color: palette(black-o, 50),
                    border-bottom-color: transparent
                ),
                hover: (
                    background-color: palette(neutral, lightest),
                    color: palette(black),
                    border-bottom-color: palette(black)
                )
            )
        )
    )
);

// =Variants
$variants: (
    nav: (
        default: (
            item: (
                margin-right: 5rem
            )
        ),
        semibold: (
            link: (
                font-weight: 600
            )
        ),
        strong: (
            link: (
                font-weight: bold
            )
        ),
        pills: (
            item: (
                margin-right: 1rem
            ),
            link: (
                padding: 7px 16px,
                border-radius: 99px
            )
        ),
        tabs: (
            list: (
                border-bottom-width: 2px
            ),
            item: (
                margin-right: 1px
            ),
            link: (
                border-bottom-width: 2px,
                margin-bottom: -2px,
                padding: 12px 12px 10px 12px
            )
        ),
        centered: (
            item: (
                margin-left: 2rem,
                margin-right: 2rem
            )
        ),
        centered_pills: (
            item: (
                margin-left: 0.5rem,
                margin-right: 0.5rem
            )
        ),
        centered_tabs: (
            item: (
                margin-left: 1px,
                margin-right: 1px
            )
        ),
        right: (
            item: (
                margin-right: 0,
                margin-left: 5rem
            )
        ),
        right_pills: (
            item: (
                margin-right: 0,
                margin-left: 1rem
            )
        ),
        right_tabs: (
            item: (
                margin-right: 1px,
                margin-left: 0
            )
        )
    )
);