Modules
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 extending the type scale in $scales.
See also how to work with text size scales for modules.
// =Scales
$scales: map-extend($scales, (
type: (
menu: (
default: 16px, // change existing size
large: 18px // add new size
)
)
));
In this case, Superkube will automatically generate the menu-large modifier and change the default menu with new value of text size.
<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>
Caps #
The menu module has a menu-caps modifier that makes menu items in uppercase.
<nav class="menu menu-caps">...</nav>
Caps variants
The menu-caps modifier has its own font size, different from the default and the padding parameter of the menu item.
You can change these values by overriding them in $scales and $variants.
See also how to work with text size scales and how to work with variants for modules.
// =Scales
$scales: map-extend($scales, (
type: (
menu: (
// change the default 13px to 12px
caps: 12px
)
)
));
// =Params
$variants: map-extend($variants, (
menu: (
caps: (
link: (
// changes the default '8px 0' to new value
padding: 10px 0
)
)
)
));
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 change existing colors or add a new color modifier. See also how to work with colors for modules.
Each menu 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, (
menu: (
default: (
link: (
base: (
color: palette(active, dark)
),
hover: (
color: palette(black)
),
active: (
color: palette(black-o, 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 by extending $colors.
// =Colors
$colors: map-extend($colors, (
menu: (
accent: (
link: (
base: (
color: palette(negative, dark)
),
hover: (
color: palette(black)
),
active: (
color: palette(black-o, 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">
<a href="#" class="menu-link">Messages</a>
<span class="badge badge-important">3</span>
</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">
<a href="#" class="menu-link flex-off">News</a>
<span class="label label-positive ml-1">New</span>
</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</a>
<span class="caret"></span>
</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 without the nav tag to the menu item.
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Analytics</a>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Data</a>
</li>
</ul>
</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>
<ul class="menu-list menu-medium menu-light bg-dark p-4">
<li class="menu-item">
<a href="#" class="menu-link">Data</a>
</li>
</ul>
</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 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,
menu: (
default: (
link: (
padding: 7px 0
)
)
)
));
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>
You can change the parameters and colors of the menu-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,
menu: (
pills: (
item: (
margin-bottom: 1px
),
link: (
padding: 6px 10px,
border-radius: radius(base)
)
)
)
));
// =Colors
$colors: map-extend($colors, (
menu: (
pills: (
item: (
active: (
link: (
color: palette(neutral, lightest),
background-color: palette(black)
)
)
),
link: (
base: (
color: palette(black)
),
hover: (
background-color: palette(black-o, 10)
)
)
)
)
));
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>
You can change the parameters and colors of the menu-stacked 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,
menu: (
stacked: (
item: (
border-bottom-width: 1px
),
link: (
padding: 8px 0
)
)
)
));
// =Colors
$colors: map-extend($colors, (
menu: (
stacked: (
item: (
border-bottom-color: palette(black-o, 7)
)
)
)
));
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>
You can change the parameters and colors of the menu-numbered 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,
menu: (
numbered: (
item: (
before: (
width: 24px,
font-size: 80%
),
// for numbers positioned on the right
after: (
width: 24px,
font-size: 80%
)
)
)
)
));
// =Colors
$colors: map-extend($colors, (
menu: (
numbered: (
item: (
before: (
color: palette(black-o, 60)
),
// for numbers positioned on the right
after: (
color: palette(black-o, 60)
)
)
)
)
));
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: (
menu: (
caps: 13px 1.3,
small: 13px 1.3,
medium: 14px 1.3,
default: 15px 1.3
)
)
);
// =Colors
$colors: (
menu: (
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: (
color: palette(neutral, lightest),
background-color: palette(black)
)
)
),
link: (
base: (
color: palette(black)
),
hover: (
background-color: palette(black-o, 10)
)
)
),
numbered: (
item: (
before: (
color: palette(black-o, 60)
),
after: (
color: palette(black-o, 60)
)
)
),
numbered_light: (
item: (
before: (
color: palette(white-o, 60)
),
after: (
color: palette(white-o, 60)
)
)
),
stacked: (
item: (
border-bottom-color: palette(black-o, 7)
)
),
stacked_light: (
item: (
border-bottom-color: palette(white-o, 20)
)
)
)
);
// =Variants
$variants: (
menu: (
default: (
link: (
padding: 5px 0
)
),
semibold: (
link: (
font-weight: 600
)
),
strong: (
link: (
font-weight: bold
)
),
caps: (
link: (
padding: 8px 0
)
),
stacked: (
item: (
border-bottom-width: 1px
),
link: (
padding: 8px 0
)
),
pills: (
item: (
margin-bottom: 1px
),
link: (
padding: 6px 10px,
border-radius: radius(base)
)
),
numbered: (
item: (
before: (
width: 24px,
font-size: 80%
),
after: (
width: 24px,
font-size: 80%
)
)
)
)
);