Control Sidebar Plugin | AdminLTE 3 Documentation
Description: AdminLTE v3 Documentaion

Control Sidebar Plugin | AdminLTE v3 Documentaion

# Control Sidebar Plugin

The control sidebar component is part of AdminLTE’s layout as the right sidebar.

##### Usage

This plugin can be activated as a jQuery plugin or using the data api. To activate the plugin, you must first add the HTML markup to your layout, then create the toggle button as shown below.

###### HTML Markup

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
      <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->

###### Data api

Add `data-widget="control-sidebar"` to any button or a element to activate the plugin.

    <a href="#" data-widget="control-sidebar">Toggle Control Sidebar</a>

###### jQuery

Just like all other AdminLTE plugins, you can also activate the toggle button using jQuery by running the following example.

    $("#my-toggle-button").ControlSidebar('toggle');

##### Options

Name | Type | Default | Description
--- | --- | --- | ---
controlsidebarSlide | Boolean | TRUE | Whether the sidebar should slide over the content or push the content to make space for itself.
scrollbarTheme | Boolean | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
scrollbarAutoHide | Boolean | `l` | Scrollbar auto-hide trigger

> ##### Tip!

> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.

>     <a href="#" data-widget="control-sidebar" data-controlsidebar-slide="false">Toggle Control Sidebar</a>

##### Events

Event Type | Description
--- | ---
expanded.lte.controlsidebar | Triggered after a control sidebar expands.
collapsed.lte.controlsidebar | Triggered after a control sidebar collapses.

Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)`