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 proper 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 270px 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 in REM units, 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. Mini sidebar can be used in main sidebar only. |
| Secondary sidebar | Main sidebar has 270px width or 56px (if .sidebar-xs class added). Secondary sidebar has fixed width of 270px, which is identical to default and default sidebars, so different sidebar components can be placed to all available sidebars. Main and secondary sidebars can contain any content - menu, navigation, buttons, lists, tabs etc. Secondary sidebar is not collapsible, but can be toggled. |
| Right sidebar | Right sidebar includes additional sidebar displayed on the right 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-right-toggle and .sidebar-right-main-toggle. |
| Right and secondary sidebars | Secondary and Right sidebars can be used together, so basically it is a 4 column layout. When right sidebar is shown, additional options are available: hide main sidebar, hide secondary sidebar, collapse main sidebar width. Since right 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. |
| Content 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. Content sidebar isn't based on grid and has the same width as other sidebars, this means all sidebar components can be placed inside content sidebar as well. Supports left and right positioning. |
Sidebar markup
Sidebar markup is the same in layout variations. First and second layouts use the same markup for main and content sidebars, while other layouts don't have optional content sidebars as main sidebars are detached by default. All sidebars support cards and all card components, including card header/footer elements. All cards 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 .card-sidebar-mobile class in card body container, because this class keeps card visible in collapsed sidebar.
Main sidebar markup
Main sidebar includes block with user information and main navigation:
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
<!-- Sidebar mobile toggler -->
<div class="sidebar-mobile-toggler text-center">
<a href="#" class="sidebar-mobile-main-toggle">
<i class="icon-arrow-left8"></i>
</a>
<span class="font-weight-semibold">Main sidebar</span>
<a href="#" class="sidebar-mobile-expand">
<i class="icon-screen-full"></i>
<i class="icon-screen-normal"></i>
</a>
</div>
<!-- /sidebar mobile toggler -->
<!-- Sidebar content -->
<div class="sidebar-content">
<!-- User menu -->
<div class="sidebar-user">
...
</div>
<!-- /user menu -->
<!-- Main navigation -->
<div class="card card-sidebar-mobile">
...
</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-light sidebar-secondary sidebar-expand-md">
<!-- Sidebar mobile toggler -->
<div class="sidebar-mobile-toggler text-center">
<a href="#" class="sidebar-mobile-secondary-toggle">
<i class="icon-arrow-left8"></i>
</a>
<span class="font-weight-semibold">Secondary sidebar</span>
<a href="#" class="sidebar-mobile-expand">
<i class="icon-screen-full"></i>
<i class="icon-screen-normal"></i>
</a>
</div>
<!-- /sidebar mobile toggler -->
<!-- Sidebar content -->
<div class="sidebar-content">
...
</div>
<!-- /sidebar content -->
</div>
<!-- /secondary sidebar -->
Right sidebar markup
Right sidebar appears on the right side from content area. Supports all available sidebar components, can be either dark or white and supports alternative navigation:
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-right sidebar-expand-md">
<!-- Sidebar mobile toggler -->
<div class="sidebar-mobile-toggler text-center">
<a href="#" class="sidebar-mobile-expand">
<i class="icon-screen-full"></i>
<i class="icon-screen-normal"></i>
</a>
<span class="font-weight-semibold">Right sidebar</span>
<a href="#" class="sidebar-mobile-right-toggle">
<i class="icon-arrow-right8"></i>
</a>
</div>
<!-- /sidebar mobile toggler -->
<!-- Sidebar content -->
<div class="sidebar-content">
...
</div>
<!-- /sidebar content -->
</div>
<!-- /right sidebar -->
Content 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:
<!-- Content area -->
<div class="content">
<!-- Inner container -->
<div class="d-md-flex align-items-md-start">
<!-- Left sidebar component -->
<div class="sidebar sidebar-light sidebar-component sidebar-component-left sidebar-expand-md">
<!-- Sidebar content -->
<div class="sidebar-content">
...
</div>
<!-- /sidebar content -->
</div>
<!-- /left sidebar component -->
<!-- Right content -->
<div class="w-100">
...
</div>
<!-- /right content -->
</div>
<!-- /inner container -->
</div>
<!-- /content area -->
Sidebar classes
Overview
This table demonstrates all classes for sidebar container, responsible for the sidebar width and color. Almost all of 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). 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 sidebar has .sidebar-main class. By default, all components except main navigation are hidden in mini sidebar. |
.sidebar-secondary |
Defines secondary sidebar. Has fixed 270px width and usually comes after main sidebar. |
.sidebar-right |
Defines right sidebar. Has fixed 270px width and appears on the right side from the main sidebar. |
.sidebar-light |
Defines light sidebar. This class can be applied to all sidebar types and positions. |
.sidebar-dark |
Defines dark sidebar. This class can be applied to all sidebar types and positions. This class is also required for custom colors (see below). |
.sidebar-dark.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-component |
This class is required in content (or component) sidebar. Also requires .sidebar-component-left or .sidebar-component-right classes for proper spacing. |
.sidebar-expand-[breakpoint] |
This class specifies when sidebar needs to be collapsed, basically when sidebar switches to mobile mode. Breakpoint should always be similar to navbar breakpoint for proper matching. Available breakpoints are: xl, lg, md and sm. This class is required. |
Example Markup
Default left aligned sidebar markup:
<!-- Default sidebar layout -->
<body>
<!-- Navbar -->
<div class="navbar navbar-dark navbar-expand-md">
...
</div>
<!-- /navbar -->
<!-- Page container -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
<div class="sidebar-content">
...
</div>
</div>
<!-- /main sidebar -->
<!-- Main content -->
<div class="content-wrapper">
...
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</body>
<!-- /default sidebar layout -->
Mini sidebar markup. The only difference is <body> class:
<!-- Mini sidebar layout -->
<body class="sidebar-xs">
<!-- Navbar -->
<div class="navbar navbar-dark navbar-expand-md">
...
</div>
<!-- /navbar -->
<!-- Page container -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
<div class="sidebar-content">
...
</div>
</div>
<!-- /main sidebar -->
<!-- Main content -->
<div class="content-wrapper">
...
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</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. Please note: these classes don't change sidebar markup, only CSS rules.
| 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-right-toggle |
Toggles right sidebar - if right sidebar is shown, main sidebar width remains the same, whether it's in default or mini mode. |
.sidebar-right-main-toggle |
Toggles right sidebar - if right sidebar is shown, main sidebar changes its width from default to mini and vice versa. Works with all sidebar layouts - main and main/secondary. |
.sidebar-right-main-hide |
Hides and shows main sidebar in layout with right sidebar. If right sidebar is shown, main sidebar is hidden despite current width. |
.sidebar-secondary-toggle |
Hides/shows secondary sidebar. Secondary sidebar supports only toggle functionality and always has fixed width of 270px. |
.sidebar-right-secondary-hide |
Hides/shows secondary sidebar - if right sidebar is shown, secondary sidebar is hidden. This works only in the layout with right sidebar. |
.sidebar-component-toggle |
Hides/shows content sidebars. Content sidebars aren't connected with other sidebars, so this is the only button that controls their visibility. |
.sidebar-mobile-main-toggle |
Toggles main sidebar on mobile - slides from left to right. |
.sidebar-mobile-secondary-toggle |
Toggles secondary sidebar on mobile - slides from left to right. |
.sidebar-mobile-right-toggle |
Toggles right sidebar on mobile - slides from right to left. |
.sidebar-mobile-component-toggle |
Toggles content sidebar on mobile - has full width by default, has no animation. |
.sidebar-mobile-expand |
Expands sidebar to full width. Works only with main, secondary and right sidebars. |
Example Markup
Default placement of sidebar control buttons is top navbar:
<!-- Navbar placement -->
<div class="navbar navbar-expand navbar-dark">
<div class="navbar-brand">...</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="navbar-nav-link sidebar-control sidebar-main-toggle">
<i class="icon-menu"></i>
</a>
</li>
...
</ul>
</div>
<!-- /navbar placement -->
Here is an example of button inside card header:
<!-- Card header placement -->
<div class="card">
<div class="card-header header-element-inline">
<h5 class="card-title">Card title</h5>
<div class="header-elements">
<button type="button" class="sidebar-main-toggle">
<i class="icon-menu"></i>
Collapse sidebar
</button>
</div>
</div>
<div class="card-body">...</div>
</div>
<!-- /card header placement -->