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

{{ title }}

To create a basic sidebar menu, the following is required:
  • unordered list wrapper with the .sidebar-menu class
  • menu items use the .sidebar-menu-item class
  • menu links use the .sidebar-menu-button class
{% include 'code/sidebar-menu/basic.html' %}
CSS Class Description
.sidebar-menu The sidebar menu wrapper (unordered list)
.sidebar-menu-item The sidebar menu item (unordered list item)
.sidebar-menu-button The sidebar menu link

Sidebar menu icons

Dependencies

The following examples are using Material icons, so make sure to load the icons library into the <head> section of your page before using the examples.
{% markdown %} ```html ``` {% endmarkdown %}

Usage

To add an icon to the sidebar menu button, add an element using the .sidebar-menu-icon base icon class within the .sidebar-menu-button element. Also, to use the Material icons add the .material-icons class to the .sidebar-menu-icon element.
{% include 'code/sidebar-menu/icons.html' %}
CSS Class Description
.sidebar-menu-icon The sidebar menu icon

Sidebar menu style

{% include 'code/sidebar-menu/style.html' %}
All the following classes should be applied on .sidebar-menu elements.
CSS Class Description
.sm-condensed Applies a smaller spacing to sidebar menu buttons
.sm-bordered Applies a border to sidebar menu items
.sm-active-button-bg Applies a background color to active sidebar menu items
.sm-icons-right Aligns the sidebar menu icons to the right
.sm-icons-block Makes the sidebar menu icons appear wrapped into a square block
{% endblock %}