--- title: Sidebar menus slug: sidebar/menus path: ../ --- {% extends "layouts/default.html" %} {% block page %}
To create a basic sidebar menu, the following is required:
.sidebar-menu
class.sidebar-menu-item
class.sidebar-menu-button
classCSS 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 |
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 %}
To add an icon to the sidebar menu button, add an element using the{% include 'code/sidebar-menu/icons.html' %}.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.
CSS Class | Description |
---|---|
.sidebar-menu-icon |
The sidebar menu icon |
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 |