To create a basic sidebar menu:
- add
ul
wrapper using the .sidebar-menu
class
- add
li
menu items using the .sidebar-menu-item
class
- add
a
menu buttons use the .sidebar-menu-button
class
- add the
.active
class to .sidebar-menu-item
elements
{% include 'code/sidebar-menu/basic.html' %}
CSS Class |
Description |
.sidebar-menu |
The sidebar menu wrapper ul |
.sidebar-menu-item |
The sidebar menu item li |
.sidebar-menu-button |
The sidebar menu button a |
You can customize sidebar menus with the following Sass variables.
Spacing
Sass variable |
Description |
Default value |
$sm-spacing-x |
Defines the horizontal spacing for sidebar menus |
$sidebar-spacing-x |
$sm-spacing-y |
Defines the vertical spacing for sidebar menus |
$sidebar-spacing-y |
.sidebar-menu-button
Sass variable |
Description |
Default value |
$sm-button-font-size |
Defines the base font size in px for .sidebar-menu-button |
$sidebar-font-size |
$sm-button-font-weight |
Defines the font weight for .sidebar-menu-button |
400 |
$sm-button-height |
Defines the height in px for .sidebar-menu-button |
42px |
$sm-active-button-font-weight |
Defines the font weight for .sidebar-menu-button when using li.sidebar-menu-item.active |
$sm-button-font-weight |