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

{{ title }}

You can modify the style of sidebar menus and sidebar submenus by using the following CSS helper classes.

All the following classes should be applied on .sidebar-menu and .sidebar-submenu elements.
CSS Class Description
.sm-condensed Applies a smaller spacing to sidebar menu buttons
.sm-bordered Applies a border bottom to a .sidebar-menu or .sidebar-submenu
.sm-item-bordered Applies a border bottom to .sidebar-menu or .sidebar-submenu 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 Wrap the sidebar menu icons into a square block with background color
.sm-indent Increase the horizontal spacing of .sidebar-menu or .sidebar-submenu buttons
You can customize sidebar utilities with the following Sass variables.

.sm-condensed

Sass variable Description Default value
$sm-condensed-button-height Defines the height in px for sidebar menu buttons when using .sm-condensed $sm-button-height - ($sm-button-height/4)
$ssm-condensed-button-height Defines the height in px for sidebar submenu buttons when using .sm-condensed $ssm-button-height - ($ssm-button-height/4)

.sm-bordered

Sass variable Description Default value
$sidebar-dark-border-color Defines the default border color for sidebar elements when using the .sidebar-dark skin rgba(0, 0, 0, .15)
$sidebar-light-border-color Defines the default border color for sidebar elements when using the .sidebar-light skin #e5e5e5

.sm-item-bordered

Sass variable Description Default value
$sm-dark-item-border-color Defines the border color for sidebar menu items when using the .sidebar-dark skin $sidebar-dark-border-color
$ssm-dark-item-border-color Defines the border color for sidebar submenu items when using the .sidebar-dark skin $sm-dark-item-border-color
$sm-light-item-border-color Defines the border color for sidebar menu items when using the .sidebar-light skin $sidebar-light-border-color
$ssm-light-item-border-color Defines the border color for sidebar submenu items when using the .sidebar-light skin $sm-light-item-border-color

.sm-active-button-bg

Sass variable Description Default value
$sm-dark-active-button-bg Defines the background color for active sidebar menu buttons when using the .sidebar-dark skin rgba(255, 255, 255, .12)
$sm-dark-activebuttonbg-button-color Defines the text color for active sidebar menu buttons when using the .sidebar-dark skin #fff
$sm-dark-activebuttonbg-icon-color Defines the icon text color for active sidebar menu buttons when using the .sidebar-dark skin $sm-dark-activebuttonbg-button-color
$sm-light-active-button-bg Defines the background color for active sidebar menu buttons when using the .sidebar-light skin $brand-primary
$sm-light-activebuttonbg-button-color Defines the text color for active sidebar menu buttons when using the .sidebar-light skin #fff
$sm-light-activebuttonbg-icon-color Defines the icon text color for active sidebar menu buttons when using the .sidebar-light skin $sm-light-activebuttonbg-button-color

.sm-active-button-bg and .sm-icons-block

Sass variable Description Default value
$sm-dark-active-iconsblock-activebuttonbg-icon-bg Defines the icon background color for active sidebar menu buttons when using the .sidebar-dark skin $sm-dark-active-iconsblock-icon-bg
$sm-light-active-iconsblock-activebuttonbg-icon-bg Defines the icon background color for active sidebar menu buttons when using the .sidebar-light skin $sm-light-active-iconsblock-icon-bg
{% include 'code/material-icons.html' %}

Usage

{% include 'code/sidebar-menu/style.html' %}
{% endblock %}