--- 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 %}