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

{{ title }}

{% markdown %} ## Usage ### Via data attributes > To change the sidebar position, add the `data-position` attribute with any of the following values. When using the `data-position` attribute it's not required to add any extra CSS classes. {% endmarkdown %}
Value Description Default
left Positions the sidebar to the left check_circle
right Positions the sidebar to the right
{% include 'code/data-attributes/sidebar-position.html' %}
{% markdown %} ## CSS reference > To change the sidebar position without JavaScript, you can add the following CSS classes manually to the `.sidebar` element. {% endmarkdown %}
CSS Class Description
.sidebar-left Positions the sidebar to the left
.sidebar-right Positions the sidebar to the right
{% endblock %}