---
title: Sidebar
slug: sidebar/index
path: ../
---
{% extends "layouts/default.html" %}
{% block page %}
{{ title }}
{% markdown %}
> At minimum, the following structure is required:
- sidebars require the `.sidebar` class
- sidebars require a unique `id` attribute
- add `data-size="2|3"` attribute for the sidebar width (defaults to 3)
- add `data-visible="..."` attribute for automatic sidebar toggle on screen size breakpoints, for example `md lg md-up lg-up` in any combination. Defaults to `md-up`. Can also be `none` to disable.
- `data-scrollable` attribute to enable the scrollable area
{% endmarkdown %}
{% include 'code/sidebar-basic.html' %}
{% markdown %}
## Toggle buttons
> Note the sidebar container element requires a unique `id` attribute.
{% endmarkdown %}
{% include 'code/toggle-button.html' %}
{% markdown %}
## JavaScript
```js
// Enable sidebars
BootstrapLayout.Sidebar.init()
```
{% endmarkdown %}
{% endblock %}