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