bootstrap-layout/docs/src/html/pages/sidebar/index.html

Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities

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

{% block page %}
<h1>{{ title }}</h1>

<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <span class="nav-link active">Usage</span>
    </li>
    <li class="nav-item">
      <a href="../demo/layout-basic.html" target="_blank" class="nav-link">Demo</a>
    </li>
  </ul>
  <blockquote>
    To create a sidebar, you must:
  </blockquote>
  <ul>
    <li>use the <code>.sidebar</code> class</li>
    <li>have a unique <code>id</code> attribute</li>
    <li><em class="strong">optional</em> add <code>data-scrollable</code> attribute to enable <a href="../scrollbars.html">custom scrollbars</a></li>
  </ul>
  {% include 'code/sidebar/basic.html' %}
</div>

<h2>JavaScript</h2>
<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#js-methods" data-toggle="pill" class="nav-link active">Methods</a>
    </li>
    <li class="nav-item">
      <a href="#js-events" data-toggle="pill" class="nav-link">Events</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="js-methods">
      {% include 'reference/js/methods/sidebar.init.html' %} <hr>
      {% include 'reference/js/methods/sidebar.destroy.html' %} <hr>
      {% include 'reference/js/methods/sidebar.show.html' %} <hr>
      {% include 'reference/js/methods/sidebar.hide.html' %} <hr>
      {% include 'reference/js/methods/sidebar.toggle.html' %}
    </div>
    <div class="tab-pane" id="js-events">
      {% include 'reference/js/events/sidebar.html' %}
    </div>
  </div>
</div>
{% endblock %}