sidebar-style-guide
A style guide (CSS and Sass) providing a convenient base for styling common sidebar/drawer elements like menus, brand, etc.
This package complements the drawer component from material-design-kit.
Installation
Install sidebar-style-guide via npm.
npm install sidebar-style-guide
Usage
// Customize variables
Sidebar skins
There are two base skin variants that you get out of the box for making a sidebar with a light background color and dark text color or a sidebar with dark background color and light text color.
CSS Class | Description |
---|---|
.sidebar-light |
Defines the basic style for a sidebar with a light background color and dark text color. |
.sidebar-dark |
Defines the basic style for a sidebar with a dark background color and light text color. |
Note that none of the skin classes include a background color, so the following example assumes you are adding the background with additional custom classes (i.e .bg-primary
and .bg-white
from Bootstrap).
<!-- .sidebar-light --> ... <!-- .sidebar-dark --> ...
Sidebar position
Note that the positioning classes don't actually change your sidebar's position, but they can add styling which depends on the sidebar position. For example, when the sidebar is positioned to the left, you could apply a border to the right of the sidebar, separating the page content from the sidebar with a line.
CSS Class | Description |
---|---|
.sidebar-left |
Applies style on a sidebar positioned to the left |
.sidebar-right |
Applies style on a sidebar positioned to the right |
...
Sidebar menu
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 |
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
<!-- Basic sidebar menu --> <!-- Active menu item --> Active menu item <!-- Regular menu item --> Regular menu item
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 | 0 |
$sm-spacing-y |
Defines the vertical spacing for sidebar menus | $sidebar-spacing-y |
$sm-inner-spacing-x |
Defines the horizontal spacing between button elements such as icons and badges | 5px |
.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-button-spacing-x |
Defines the horizontal spacing for sidebar menu buttons | $sidebar-spacing-x |
$sm-active-button-font-weight |
Defines the font weight for .sidebar-menu-button when using li.sidebar-menu-item.active |
$sm-button-font-weight |
Sidebar menu icons
Add icons to sidebar menus.
CSS Class | Description |
---|---|
.sidebar-menu-icon |
The sidebar menu icon |
.sidebar-menu-icon--left or .sidebar-menu-icon--right |
Add spacing between the menu icon and text |
.material-icons |
Required on .sidebar-menu-icon elements when using Material icons |
Dependencies
The following example is using Material icons, so make sure to load the icons library into the <head>
section of your page before using the example.
<!-- Material Design Icons -->
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.
<!-- Sidebar menu icons --> home Menu button text
You can customize sidebar menu icons with the following Sass variables.
Sass variable | Description | Default value |
---|---|---|
$sm-icon-font-size |
Defines the base font size in px for sidebar menu icons |
24px |
$sm-icon-spacing-x |
Defines the horizontal spacing between the sidebar menu icons and text when using .sidebar-menu-icon--left or .sidebar-menu-icon--right modifiers |
$sm-inner-spacing-x |
See also
Sidebar menu icons in the context of sidebar submenus.
Sidebar menu utilities
You can modify the style of sidebar menus and sidebar submenus by using 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-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 * 0.75 |
$ssm-condensed-button-height |
Defines the height in px for sidebar submenu buttons when using .sm-condensed |
$ssm-button-height * 0.75 |
.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 |
$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 |
Dependencies
The following example is using Material icons, so make sure to load the icons library into the <head>
section of your page before using the example.
<!-- Material Design Icons -->
Usage
<!-- Sidebar menu style modifiers --> home Menu button menu Another button
Sidebar submenu
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 |
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 - add the optional
.sidebar-menu-toggle-icon
indicator element to the top level toggle button
<!-- Sidebar menu --> <!-- Open menu item --> Dashboard <!-- Submenu --> Active menu item Regular menu item <!-- Menu item --> Reports <!-- Submenu --> Another menu item Regular menu item
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 |