Menu
This module helps to create different vertical navigation.
Usage #
The menu is a list of items and links, wrapped in nav tag with a menu class.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">...</a>
</li>
</ul>
</nav>
Active state
Set the active class for the menu item to make it active.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item active">
<a href="#" class="menu-link">...</a>
</li>
</ul>
</nav>
Scales #
By default, the menu has a 15px font size and two modifiers for changing the size.
- menu-small — 13px
- menu-medium — 14px
<nav class="menu menu-small">...</nav>
Add or change scale
You can add your own size or change an existing one by creating a modifier and specifying new menu parameters in your custom SCSS.
.menu-large {
--menu-font-size: 18px;
}
Now you have a new menu-large size modifier.
<nav class="menu menu-large">...</nav>
Weight #
The menu module has two modifiers to change the font weight.
- menu-semibold
- menu-strong
<nav class="menu menu-strong">...</nav>
Underline #
By default, links in menu items do not have an underline.
The menu-underline modifier turns on the underline in links.
<nav class="menu menu-underline">...</nav>
Underline off
By default, when you hover over the links in the menu, they have an underline.
The menu-underline-off modifier disables the underline on hover.
<nav class="menu menu-underline-off">...</nav>
Colors #
The menu module has several link color modifiers.
Muted
The menu-muted modifier makes links muted.
This is useful, for example, in the footer menu.
<nav class="menu menu-muted">...</nav>
Primary
The menu-primary modifier makes links with primary colors.
<nav class="menu menu-primary">...</nav>
Light
The menu-light modifier makes links with light colors.
This is useful, for example, on dark backgrounds.
<nav class="menu menu-light">...</nav>
Custom colors
For the menu module, you can override default colors. You can do this in your custom SCSS. See also how to customize the framework.
.menu {
--menu-link-color: var(--palette-active-base);
--menu-link-hover-color: var(--palette-black);
--menu-link-active-color: var(--palette-black-40);
}
In the example above for the menu, 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.
.menu-accent {
--menu-link-color: var(--palette-negative-base);
--menu-link-hover-color: var(--palette-black);
--menu-link-active-color: var(--palette-black-40);
}
As a result, you will get a new color modifier with automatically generated colors for the menu links.
<nav class="menu menu-accent">...</nav>
Features #
The menu 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 menu.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<div class="menu-link-box">
<a href="#" class="menu-link">Messages</a>
<span class="badge badge-dark">3</span>
</div>
</li>
</ul>
</nav>
Label
Using the Label module it is possible to place a label in the menu.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<div class="menu-link-box">
<a href="#" class="menu-link flex-none">News</a>
<span class="label label-dark ml-1">New</span>
</div>
</li>
</ul>
</nav>
Icon
Using the Icon module it is possible to place an icon in the menu.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">
<span>Analytics</span>
<span class="icon icon-16 ml-1">
<svg...>
</span>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">
<span class="icon icon-16 mr-1">
<svg...>
</span>
<span>Shop</span>
</a>
</li>
</ul>
</nav>
Caret
Using the Caret module it is possible to place a caret in the menu. For example, to expand the nested menu.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">
Analytics
<span class="caret push-right"></span>
</a>
</li>
</ul>
</nav>
Text inside item
It's very easy to add text to a menu item, for example, to describe the item.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Shop</a>
<p class="text-small text-muted mb-2">...</p>
</li>
</ul>
</nav>
Nested #
Add a nested list to the menu item.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Analytics</a>
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Data</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
To the nested list you can apply both modifiers of the menu module and any other.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Analytics</a>
<nav class="menu menu-medium menu-light bg-dark p-4">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Data</a>
</li>
</ul>
</nav>
</li>
</ul>
</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.
.menu {
--menu-link-padding-y: 7px;
}
Pills #
The menu-pills modifier makes menu links with a background on hover and when active.
<nav class="menu menu-pills">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">...</a>
</li>
</ul>
</nav>
Stacked #
The menu-stacked modifier creates a separator between the menu items.
<nav class="menu menu-stacked">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">...</a>
</li>
</ul>
</nav>
Numbered #
The menu-numbered modifier creates a sequence number before each menu item.
<nav class="menu menu-numbered">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">...</a>
</li>
</ul>
</nav>
Use the menu-numbered-right modifier to show numbers after the link.
<nav class="menu menu-numbered menu-numbered-right">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">...</a>
</li>
</ul>
</nav>
Variables #
Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.
// =Menu
// colors
--menu-link-color: var(--palette-black);
--menu-link-background-color: transparent;
--menu-link-hover-color: var(--palette-black-60);
--menu-link-hover-background-color: transparent;
--menu-link-active-color: var(--palette-black-40);
--menu-link-active-background-color: transparent;
// params
--menu-font-size: 15px;
--menu-nested-margin: 5rem;
--menu-line-height: 1.3;
--menu-link-padding-x: 0;
--menu-link-padding-y: 6px;
--menu-link-font-weight: normal;
--menu-link-active-font-weight: normal;
--menu-item-space: 0;
--menu-item-padding: 0;
// =Stacked
// colors
--menu-item-border-color: var(--palette-black-7);
// params
--menu-link-padding-y: 8px;
--menu-item-border-width: 1px;
--menu-item-border-style: solid;
// =Pills
// colors
--menu-link-color: var(--palette-black);
--menu-link-hover-background-color: var(--palette-black-10);
--menu-link-active-color: var(--palette-neutral-lightest);
--menu-link-active-background-color: var(--palette-black);
// params
--menu-link-padding-y: 6px;
--menu-link-padding-x: 10px;
--menu-link-border-radius: var(--radius-base);
--menu-item-space: 1px;
// =Numbered
// colors
--menu-number-color: var(--palette-black-60);
// params
--menu-number-font-size: 80%;
--menu-number-width: 22px;