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

{{ title }}

Extend sidebar menus with basic submenus.

Basic usage

To create a basic sidebar submenu:
  • add ul wrapper using the .sidebar-submenu class, after a .sidebar-menu-button element
  • add li submenu items using the .sidebar-menu-item class
  • add a submenu buttons using the .sidebar-menu-button class
  • add the .open class to the parent .sidebar-menu-item element to display a submenu
{% include 'code/sidebar-menu/submenu.html' %}

Behaviour

See sidebar collapse and sidebar dropdown.
Also see the CSS reference for sidebar menus.
CSS Class Description
.sidebar-submenu The sidebar submenu wrapper ul placed after a.sidebar-menu-button elements
.sidebar-menu-item The sidebar submenu item li
.sidebar-menu-button The sidebar submenu button a
.open Makes the sidebar submenu visible when applied to a li.sidebar-menu-item parent
You can customize sidebar submenus with the following Sass variables.

.sidebar-menu-button

Sass variable Description Default value
$ssm-button-height Defines the height in px for sidebar submenu buttons $sm-button-height
$ssm-button-font-size Defines the base font size in px for sidebar submenu buttons $sm-button-font-size

.sidebar-menu-icon

Sass variable Description Default value
$ssm-icon-font-size Defines the base font size in px for sidebar submenu icons $sm-icon-font-size

See also

{% endblock %}