Control Sidebar Plugin

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


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 -->
<!-- /.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>

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

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
target String .control-sidebar Target control-sidebar to handle multiple control-sidebars.
animationSpeed Boolean 300 Set the animation/transition speed equals to the scss transition speed.

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>
Event Type  Description
expanded.lte.controlsidebar Triggered after a control sidebar expands.
collapsed.lte.controlsidebar Triggered after a control sidebar collapses.
collapsed-done.lte.controlsidebar Triggered after a control sidebar is fully collapsed.

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

Method Description
collapse Collapses the control-sidebar
show Show’s the control-sidebar
toggle Toggles the state of the control-sidebar expanded and collapsed

Example: $('#toggle-button').ControlSidebar('toggle')