--- title: Sidebar menu slug: sidebar-menu/index path: ../ --- {% extends "layouts/default.html" %} {% block page %}

{{ title }}

Create sidebar menus.

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
{% endblock %}