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