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.
Tab section
<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;
// small
--nav-item-space: 5rem;
// 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;