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 creating a modifier and specifying new nav parameters in your custom SCSS.


.nav-large {
    --nav-font-size: var(--type-scale-18);
}

Now you have a new nav-large size modifier.


<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 override default colors. You can do this in your custom SCSS. See also how to customize the framework.


.nav {
    --nav-link-color: var(--palette-active-base);
    --nav-link-hover-color: var(--palette-black);
    --nav-link-active-color: var(--palette-black-40);
}

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.


.nav-accent {
    --nav-link-color: var(--palette-negative-base);
    --nav-link-hover-color: var(--palette-black);
    --nav-link-active-color: var(--palette-black-40);
}

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 #

Left

The nav-left-sm modifier on small screens makes the nav-right, nav-centered, and nav-full navigation aligned to the left.


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

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 changing module variables. See also how to customize the framework.

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


.nav {
    --nav-item-space: 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>

Points #

The nav-points modifier makes nav links as points.


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

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>

// tab section
<div class="bg-light py-10 px-4">...</div>

Switcher #

The nav-switcher modifier makes nav links as switch segments.


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

Variables #

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


// colors
--nav-link-color: var(--palette-black);
--nav-link-background-color: var(--palette-transparent);
--nav-link-hover-color: var(--palette-black-60);
--nav-link-hover-background-color: var(--palette-transparent);
--nav-link-active-color: var(--palette-black-40);
--nav-link-active-background-color: var(--palette-transparent);

// vars
--nav-font-size: var(--type-scale-14);
--nav-item-space: 6rem;
--nav-link-padding: 0;
--nav-link-border-radius: 0;

// nav-pills
--nav-link-color: var(--palette-black);
--nav-link-hover-background-color: var(--palette-black-10);
--nav-link-active-color: var(--palette-neutral-lightest);
--nav-link-active-background-color: var(--palette-black);
--nav-item-space: 1rem;
--nav-link-padding: 7px 16px;
--nav-link-border-radius: 99px;

// nav-points
--nav-border-color: var(--palette-black-10);
--nav-border-width: 2px;
--nav-item-space: 1px;
--nav-link-padding: 12px 14px 10px 14px;
--nav-link-color: var(--palette-black-50);
--nav-link-border-color: var(--palette-transparent);
--nav-link-background-color: var(--palette-transparent);
--nav-link-hover-color: var(--palette-black);
--nav-link-hover-border-color: var(--palette-black);
--nav-link-hover-background-color: var(--palette-neutral-lightest);
--nav-link-active-color: var(--palette-black);
--nav-link-active-border-color: var(--palette-black);
--nav-link-active-background-color: var(--palette-transparent);

// nav-tabs
--nav-item-space: 1px;
--nav-link-padding: 12px 16px 10px 16px;
--nav-link-color: var(--palette-black-50);
--nav-link-background-color: var(--palette-black-5);
--nav-link-hover-color: var(--palette-black);
--nav-link-hover-background-color: var(--palette-white);
--nav-link-active-color: var(--palette-black);
--nav-link-active-background-color: var(--palette-white);

// nav-switcher
--nav-border-width: 1px;
--nav-item-space: 1px;
--nav-link-padding: 8px 16px;
--nav-link-border-radius: 99px;
--nav-link-border-width: 2px;
--nav-border-color: var(--palette-black-10);
--nav-link-color: var(--palette-black-50);
--nav-link-border-color: var(--palette-transparent);
--nav-link-background-color: var(--palette-transparent);
--nav-link-hover-color: var(--palette-black);
--nav-link-hover-border-color: var(--palette-black);
--nav-link-hover-background-color: var(--palette-transparent);
--nav-link-active-color: var(--palette-black);
--nav-link-active-border-color: var(--palette-black);
--nav-link-active-background-color: var(--palette-transparent);

// nav-centered
--nav-item-space: 3rem;

// nav-centered.nav-pills
--nav-item-space: 0.5rem;

// nav-centered.nav-points
--nav-item-space: 1px;

// nav-right.nav-points
--nav-item-space: 1px;

// nav-right.nav-pills
--nav-item-space: 1rem;