---
title: Sidebar size
slug: sidebar/size
path: ../
---
{% extends "layouts/default.html" %}
{% block page %}
{{ title }}
{% markdown %}
## Usage
### Via data attributes
> To change the sidebar size, add the `data-size` attribute with any of the following values. When using the `data-size` attribute, it's not required to add any extra CSS classes.
{% endmarkdown %}
Value |
Description |
Default |
1 |
Makes the sidebar 56px wide |
2 |
Makes the sidebar 200px wide |
3 |
Makes the sidebar 250px wide |
check_circle |
{% include 'code/data-attributes/sidebar-size.html' %}
{% markdown %}
## CSS reference
### Regular sizes
> To change the sidebar size without JavaScript, you can add the following CSS classes manually to the `.sidebar` element.
{% endmarkdown %}
CSS Class |
Description |
.si-si-2 |
Makes the sidebar 200px wide |
.si-si-3 |
Makes the sidebar 250px wide |
Sidebar mini
When using the 56px
wide sidebar size, you'll most likely have to adjust the sidebar content such as text and menus to fit properly.
CSS Class |
Description |
.si-si-1 |
Makes the sidebar 56px wide |
.sidebar-mini |
The .sidebar-mini class must be used together with the .si-si-1 class or with the data-size="1" data attribute.
|
{% include 'code/sidebar-mini.html' %}
Sidebar reveal
Make a regular sidebar element occupy just 56px
from the layout.
CSS Class |
Description |
.sidebar-reveal |
Reveals the sidebar on mouse over and retracts the sidebar to it's original placement on mouse out.
The .sidebar-reveal class must be used together with the .si-si-1 class or with the data-size="1" data attribute.
|
.sidebar-reveal-size-2 |
Makes a .sidebar-reveal element 200px wide.
|
.sidebar-reveal-size-3 |
Makes a .sidebar-reveal element 250px wide.
|
{% include 'code/sidebar-reveal.html' %}
{% endblock %}