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