Sidebars overview
Sidebar - vertical area that displays onscreen and presents widget components and website navigation menu in a text-based hierarchical form. All sidebars are css-driven - just add one of css classes to the body tag and/or .sidebar container, and sidebar will change its width and color. No js, css only. Although sidebar type is based on css, buttons do their job with jQuery - they switch necessary classes in <body> tag. Below you'll find summarized tables with all available button and sidebar container classes. By default the template includes 6 different sidebar types and combinations:

Table below describes all sidebar types and combinations available:

Type Description
Default sidebar Default template sidebar has 260px width, aligned to the left (to the right in RTL version) and has dark blue background color. All navigation levels are based on accordion or collapsible functionality, open on click. Supports 2 versions: static and fixed. Fixed version can be used with native or custom scrollbars.
Mini sidebar Mini sidebar has 56px width, no text in parent level of menu items, aligned to the left (to the right in RTL version) and has dark blue background color. Second navigation level opens on parent level hover, absolute positioned, other children levels are based on accordion or collapsible functionality, open on click. It is required to add .sidebar-xs class to the <body> tag. This class is responsible for sidebar width and main navigation. By default all components except main navigation are hidden in mini sidebar.
Dual sidebar Main sidebar has 260px width or 56px (if .sidebar-xs class added). Secondary sidebar has fixed width of 260px, which is identical to default and opposite sidebars, so different sidebar components can be placed to all these sidebars. Main and secondary sidebars can contain any content - menu, navigation, buttons, lists, tabs etc. In this type of sidebar only main sidebar is collapsible.
Double sidebar Double sidebar includes additional sidebar displayed on the opposite side of the main sidebar. It has a static position, appears as an additional component with 100% height and pushes content left/right. There are 2 different ways of displaying alternative sidebar: first - when it collapses main sidebar from default to mini width and second - when it hides the main sidebar. For these actions are responsible 2 different buttons - .sidebar-opposite-toggle and .sidebar-opposite-fix.
Dual double sidebar Dual and Double sidebars can be used together, so basically it is a 4 column layout. When opposite sidebar is shown, additional options are available: hide main sidebar, hide secondary sidebar, hide all sidebars or collapse main sidebar width. Since opposite sidebar is hidden by default, by manipulating classes you can display all 4 sidebars at once. Options are accessible via proper button and/or body classes.
Detached sidebar Sidebar usually is not a part of content and mainly used for navigation. Limitless allows you to use sidebar outside and inside content area. Detached sidebar isn't based on grid and has the same width as other sidebars, this means all sidebar components can be placed inside detached sidebar. Supports left and right positioning.
Sidebar markup

Sidebar markup is similar in layout variations. First and second layouts use the same markup for main and detached sidebars, while third and fourth layouts don't have optional detached sidebars as main sidebars are detached by default. All sidebars supports categories and category titles. All categories can be collapsed, removed and support sorting functionality.

Main sidebar is different. Although its markup is similar to other sidebars, functionality is different - only main sidebar can be collapsed using .sidebar-xs class added to <body> tag. In collapsed sidebar only user info block and navigation is visible and adapted to smaller width. If you need to include other components to the main sidebar, don't use .sidebar-category-visible class in category container, because this class keeps category visible in collapsed sidebar.

Main sidebar markup

Main sidebar includes block with user information and main navigation:

<!-- Main sidebar -->
<div class="sidebar sidebar-main">

	<!-- Sidebar content -->
	<div class="sidebar-content">

		<!-- User menu -->
		<div class="sidebar-user">
			<div class="category-content">
				...
			</div>
		</div>
		<!-- /user menu -->


		<!-- Main navigation -->
		<div class="sidebar-category sidebar-category-visible">
			<div class="category-content no-padding">
				<ul class="navigation navigation-main navigation-accordion">
					...
				</ul>
			</div>
		</div>
		<!-- /main navigation -->

	</div>
	<!-- /sidebar content -->

</div>
<!-- /main sidebar -->
Secondary sidebar markup

Usually secondary sidebar is light and comes after main sidebar and may include alternative navigation and sidebar components:

<!-- Secondary sidebar -->
<div class="sidebar sidebar-secondary sidebar-default">

	<!-- Sidebar content -->
	<div class="sidebar-content">

		<!-- Sidebar category -->
		<div class="sidebar-category">

			<!-- Category title -->
			<div class="category-title">
				<span>Category title</span>
				<ul class="icons-list">
					<li><a href="#" data-action="collapse"></a></li>
					...
				</ul>
			</div>
			<!-- /category title -->

		</div>
		<!-- /sidebar-category -->

	</div>
	<!-- /sidebar content -->

</div>
<!-- /main sidebar -->
Opposite sidebar markup

Opposite sidebar appears on the right side from content area. Supports all available sidebar components, can be either dark or white and supports alternative navigation:

<!-- Opposite sidebar -->
<div class="sidebar sidebar-opposite sidebar-default">

	<!-- Sidebar content -->
	<div class="sidebar-content">

		<!-- Sidebar category -->
		<div class="sidebar-category">

			<!-- Category title -->
			<div class="category-title">
				<span>Category title</span>
				<ul class="icons-list">
					<li><a href="#" data-action="collapse"></a></li>
					...
				</ul>
			</div>
			<!-- /category title -->

		</div>
		<!-- /sidebar-category -->

	</div>
	<!-- /sidebar content -->

</div>
<!-- /main sidebar -->
Detached sidebar markup

Detached sidebar is available in first and second layouts only. Detached sidebar has a bit different markup and supports both left and right positions:

<!-- Detached sidebar -->
<body class="has-detached-left">

	...

	<!-- Main content -->
	<div class="content">

		<!-- Detached sidebar -->
		<div class="sidebar-detached">
			<div class="sidebar sidebar-default">

				<!-- Sidebar content -->
				<div class="sidebar-content">

					<!-- Sidebar category -->
					<div class="sidebar-category">

						<!-- Category title -->
						<div class="category-title">
							<span>Category title</span>
							<ul class="icons-list">
								<li><a href="#" data-action="collapse"></a></li>
								...
							</ul>
						</div>
						<!-- /category title -->

					</div>
					<!-- /sidebar-category -->

				</div>
				<!-- /sidebar content -->

			</div>
		</div>
		<!-- /detached sidebar -->


		<!-- Detached container -->
		<div class="container-detached">

			<!-- Detached content -->
			<div class="content-detached">
				...
			</div>
			<!-- /detached content -->

		</div>
		<!-- /detached container -->

	</div>
	<!-- /main content -->

</body>
<!-- /main sidebar -->
Overview

This table demonstrates all classes for sidebar container, responsible for the sidebar width and color. Almost all these classes are mandatory, some of them are responsible for proper styling or have a specific code attached to this class (like .sidebar-main class, which has collapsible functionality attached). All classes can be combined depending on the type of sidebar:

Body class Description
.sidebar Default sidebar class, should be added in all layout types.
.sidebar-main Defines main sidebar. Mini sidebar .sidebar-xs class takes effect only if class .sidebar-main specified. By default all components except main navigation are hidden in mini sidebar.
.sidebar-secondary Defines secondary sidebar in dual sidebar layout. Has fixed 260px width.
.sidebar-opposite Defines opposite sidebar in double sidebar layout. Has fixed 260px width and appears on the opposite side from the main sidebar.
.sidebar-default Defines light sidebar. This class can be applied to all sidebar types and positions.
.sidebar.bg-* Defines sidebar background color. According to the custom color system, sidebar background color can be changed to one of the available colors by adding a proper class to the main sidebar container.
.sidebar-detached Needs to be added to the parent container. Also requires .has-detached-left or .has-detached-right added to the <body> tag.
.sidebar-separate Removes background and border from sidebar and displays categories as separate widgets. Mainly used with detached sidebar.
Example Markup

Default left aligned sidebar markup:

<!-- Default sidebar layout -->
<body>

	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				<div class="sidebar-content">...</div>
			</div>
			<!-- /main sidebar -->

			<!-- Main content -->
			<div class="content-wrapper">...</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->

</body>
<!-- /default sidebar layout -->

Mini sidebar markup. The only difference is <body> class:

<!-- Mini sidebar layout -->
<body class="sidebar-xs">

	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				<div class="sidebar-content">...</div>
			</div>
			<!-- /main sidebar -->

			<!-- Main content -->
			<div class="content-wrapper">...</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->

</body>
<!-- /mini sidebar layout -->
Button classes
Overview

This table displays all optional button classes, responsible for the sidebar appearance. Depending on the sidebar type, add one of these classes to any button or link and this element will handle sidebar control. Multiple controls are also available - add as many sidebar controls as you wish. Pleas note: these classes don't change sidebar markup, only its CSS.

Button class Action
.sidebar-main-toggle Collapsible sidebar. Changes main sidebar width from default to mini. This button is added to all pages by default.
.sidebar-main-hide Hides and shows main sidebar. Used mostly in dual sidebar type to hide main sidebar. In other layouts this button does the same job as .sidebar-hide-all button.
.sidebar-all-hide Hideable sidebar. Hides and shows main sidebar. Works with all sidebar types, except opposite sidebar.
.sidebar-opposite-fix Double sidebar with fixed width. If alt sidebar is shown, main sidebar stays the same and doesn't change the width.
.sidebar-opposite-toggle Collapsible double sidebar. If opposite sidebar is shown, main sidebar changes its width from default to mini. Works with all sidebar types - single and dual.
.sidebar-opposite-main-hide Hides and shows main sidebar in dual sidebar layout. If opposite sidebar is shown, main sidebar is hidden. This works only in dual double sidebar version of layout.
.sidebar-secondary-hide Hides/shows secondary sidebar in dual sidebar layout. Secondary sidebar supports only toggle functionality and always has fixed width of 260px.
.sidebar-opposite-secondary-hide Hides/shows secondary sidebar in dual sidebar layout. If opposite sidebar is shown, secondary sidebar is hidden. This works only in dual double sidebar version of layout.
.sidebar-opposite-hide Hides/shows all sidebars when opposite sidebar is shown. If opposite sidebar is shown, all sidebars are hidden. This works in all layout types.
.sidebar-detached-hide Hides/shows detached sidebars. Detached sidebars aren't connected with other sidebars, so this is the only button that controls its visibility.
Example Markup

Default placement of sidebar control buttons is top navbar:

<!-- Navbar placement -->
<div class="navbar navbar-inverse">
	<div class="navbar-header">...</div>
	<ul class="nav navbar-nav">
		<li>
			<a class="sidebar-main-toggle">
				<i class="icon-menu"></i>
			</a>
		</li>
	</ul>
</div>
<!-- /navbar placement -->

Here is an example of button inside panel heading:

<!-- Panel heading placement -->
<div class="panel panel-default">
	<div class="panel-heading">
		<h5 class="panel-title">Panel title</h5>
		<div class="heading-elements">
			<button type="button" class="sidebar-main-toggle">
				<i class="icon-menu"></i>
				Collapse sidebar
			</button>
		</div>
	</div>
	<div class="panel-body">...</div>
</div>
<!-- /panel heading placement -->