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.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 JS - they switch necessary classes in .sidebar container. 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 300px (~18.75rem) 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: fixed (default) and static (in static layout only). Both versions use default browser scrollbars, but support custom scrollbars such as perfect scrollbar component. |
| Mini sidebar | Mini sidebar has 56px width, which is calculated dynamically (icon size + double padding). No text in parent level of menu items, aligned to the left (to the right in RTL version) and has dark blue background color. Sidebar changes the width on hover, no additional changes. It is required to add .sidebar-main-resized class to the .sidebar container if you want to have it collapsed by default. This class is responsible for sidebar width and main navigation. By default all components except main navigation are hidden in mini sidebar. Can be used with main sidebar only. |
| Secondary sidebar | Main sidebar has 300px width or 56px (if .sidebar-main-resized class added). Secondary sidebar has the same fixed width of 300px, which is similar to default and right sidebars, so different sidebar components can be used in all sidebar types. Main and secondary sidebars can contain any content - menu, navigation, buttons, lists, tabs etc. Secondary sidebar can be either collapsed or hidden. |
| Right sidebar | Right sidebar layout includes additional sidebar displayed on the right (left in RTL direction) side. It is displayed as an additional component with 100% height, similar to other sidebars. Right sidebar is visible by default, but can be collapsed or hidden. |
| Right and secondary sidebars | Secondary and Right sidebars can be used together, so basically it is a 4 column layout. The width of any sidebar doesn't affect other layout columns, they all have independent width controls. Refer to the table below for more information. |
| Content sidebar | Usually sidebar 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. Supports left and right positioning and can be either stretched to fill all available height or height that depends on sidebar content height. |
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 sections and all section components, including header/footer elements. All sections can be collapsed, removed and sorted.
Main sidebar is different. Although its markup is similar to other sidebars, functionality is different - only main sidebar can be resized using .sidebar-main-resized class added to .sidebar container and collapsed. In resized sidebar only user info block and navigation are visible and adapted to smaller width. Collapsed and hidden states share the same logic, but collapsed displays the full height button that allows you to expand sidebar to full width. You can also control component visibility in resized sidebar by using 2 class names in elements: .sidebar-resize-hide to hide element when sidebar is resized; .sidebar-resize-show to show element when sidebar is resized.
Main sidebar markup (resizable)
Main sidebar includes block with user information and main navigation:
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
<!-- Sidebar content -->
<div class="sidebar-content">
<!-- Sidebar header -->
<div class="sidebar-section">
<div class="sidebar-section-body d-flex justify-content-center">
<h5 class="sidebar-resize-hide flex-grow-1 my-auto">Navigation</h5>
<div>
<button type="button" class="btn btn-flat-white btn-icon btn-sm rounded-pill border-transparent sidebar-control sidebar-main-resize d-none d-lg-inline-flex">
<i class="ph-arrows-left-right"></i>
</button>
<button type="button" class="btn btn-flat-white btn-icon btn-sm rounded-pill border-transparent sidebar-mobile-main-toggle d-lg-none">
<i class="ph-x"></i>
</button>
</div>
</div>
</div>
<!-- /sidebar header -->
<!-- Main navigation -->
<div class="sidebar-section">
...
</div>
<!-- /main navigation -->
</div>
<!-- /sidebar content -->
</div>
<!-- /main sidebar -->
Main sidebar markup (collapsible)
Main sidebar can be also collapsed or completely hidden. To hide sidebar, remove the .btn-sidebar-expand element:
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
<!-- Expand button -->
<button type="button" class="btn btn-sidebar-expand sidebar-control sidebar-main-toggle h-100">
<i class="ph-caret-right"></i>
</button>
<!-- /expand button -->
<!-- Sidebar content -->
<div class="sidebar-content">
<!-- Sidebar header -->
<div class="sidebar-section">
<div class="sidebar-section-body d-flex justify-content-center">
<h5 class="sidebar-resize-hide flex-grow-1 my-auto">Navigation</h5>
<div>
<button type="button" class="btn btn-flat-white btn-icon btn-sm rounded-pill border-transparent sidebar-control sidebar-main-toggle d-none d-lg-inline-flex">
<i class="ph-arrows-left-right"></i>
</button>
<button type="button" class="btn btn-flat-white btn-icon btn-sm rounded-pill border-transparent sidebar-mobile-main-toggle d-lg-none">
<i class="ph-x"></i>
</button>
</div>
</div>
</div>
<!-- /sidebar header -->
<!-- Main navigation -->
<div class="sidebar-section">
...
</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-expand-lg">
<!-- Expand button -->
<button type="button" class="btn btn-sidebar-expand sidebar-control sidebar-secondary-toggle h-100">
<i class="ph-caret-right"></i>
</button>
<!-- /expand button -->
<!-- Sidebar content -->
<div class="sidebar-content">
<!-- Header -->
<div class="sidebar-section sidebar-section-body d-flex align-items-center pb-0">
<h5 class="mb-0">Sidebar</h5>
<div class="ms-auto">
<button type="button" class="btn btn-light border-transparent btn-icon rounded-pill btn-sm sidebar-control sidebar-secondary-toggle d-none d-lg-inline-flex">
<i class="ph-arrows-left-right"></i>
</button>
<button type="button" class="btn btn-light border-transparent btn-icon rounded-pill btn-sm sidebar-mobile-secondary-toggle d-lg-none">
<i class="ph-x"></i>
</button>
</div>
</div>
<!-- /header -->
<!-- Sidebar section -->
<div class="sidebar-section">
<div class="sidebar-section-body"></div>
</div>
<!-- /sidebar section -->
</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-end sidebar-expand-lg">
<!-- Expand button -->
<button type="button" class="btn btn-sidebar-expand sidebar-control sidebar-end-toggle h-100">
<i class="ph-caret-left"></i>
</button>
<!-- /expand button -->
<!-- Sidebar content -->
<div class="sidebar-content">
<!-- Header -->
<div class="sidebar-section sidebar-section-body d-flex align-items-center pb-0">
<h5 class="mb-0">Sidebar</h5>
<div class="ms-auto">
<button type="button" class="btn btn-light border-transparent btn-icon rounded-pill btn-sm sidebar-control sidebar-end-toggle d-none d-lg-inline-flex">
<i class="ph-arrows-left-right"></i>
</button>
<button type="button" class="btn btn-light border-transparent btn-icon rounded-pill btn-sm sidebar-mobile-end-toggle d-lg-none">
<i class="ph-x"></i>
</button>
</div>
</div>
<!-- /header -->
<!-- Sidebar section -->
<div class="sidebar-section">
<div class="sidebar-section-body"></div>
</div>
<!-- /sidebar section -->
</div>
<!-- /sidebar content -->
</div>
<!-- /right sidebar -->
Content sidebar markup
Detached sidebar is available in 1st, 2nd amd 6th layouts only. Detached sidebar has a bit different markup and supports both left and right positions:
<!-- Content sidebar -->
<div class="sidebar sidebar-component sidebar-expand-lg border rounded shadow-sm me-lg-3 mb-3">
<!-- Sidebar content -->
<div class="sidebar-content">
<!-- Header -->
<div class="sidebar-section sidebar-section-body d-flex align-items-center d-lg-none pb-2">
<h5 class="mb-0">Sidebar</h5>
<div class="ms-auto">
<button type="button" class="btn btn-light border-transparent btn-icon rounded-pill btn-sm sidebar-mobile-component-toggle">
<i class="ph-x"></i>
</button>
</div>
</div>
<!-- /header -->
<!-- Sidebar section -->
<div class="sidebar-section">
<div class="sidebar-section-header">
...
</div>
</div>
<!-- /sidebar section -->
</div>
<!-- /sidebar content -->
</div>
<!-- /content sidebar -->
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-main-resized class) takes effect only if sidebar has .sidebar-main class. By default, all components except main navigation are hidden in mini sidebar. |
.sidebar-main-resized |
Defines main sidebar in collapsed state |
.sidebar-secondary |
Defines secondary sidebar. Has fixed 270px width and usually comes after main sidebar. |
.sidebar-secondary-collapsed |
Defines secondary sidebar in collapsed state |
.sidebar-end |
Defines right sidebar. Has fixed 270px width and appears on the right side from the main sidebar. |
.sidebar-end-collapsed |
Defines right sidebar in collapsed state |
.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-component-collapsed |
Defines content sidebar in collapsed state |
.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-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. |
.sidebar-main-unfold |
This class gets added when user hovers on mini sidebar. It controls resizable behaviour when main sidebar is collapsed. Has no effect on mobile since all sidebars on mobile have same width. |
Example Markup
Default left aligned sidebar markup:
<!-- Default sidebar layout -->
<body>
<!-- Navbar -->
<div class="navbar navbar-dark navbar-expand-lg">
...
</div>
<!-- /navbar -->
<!-- Page container -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
<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 .sidebar-main-resized class:
<!-- Mini sidebar layout -->
<body>
<!-- Navbar -->
<div class="navbar navbar-dark navbar-expand-lg">
...
</div>
<!-- /navbar -->
<!-- Page container -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg sidebar-main-resized">
<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-resize |
Resizable sidebar. Changes main sidebar width from default to mini. This button is added to all pages by default. |
.sidebar-main-toggle |
Collapses/expands and/or hides/shows main sidebar. Used mostly in dual sidebar type to hide main sidebar. |
.sidebar-end-toggle |
Toggles right sidebar - if right sidebar is shown, main sidebar width remains the same, whether it's in default or mini mode. |
.sidebar-secondary-toggle |
Hides/shows or collapses/expands secondary sidebar. Secondary sidebar supports only toggle functionality and always has fixed width of 300px. |
.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-end-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. |
Example Markup
Default placement of sidebar control buttons is sidebar header:
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
<!-- Sidebar content -->
<div class="sidebar-content">
<!-- Header -->
<div class="sidebar-section">
<div class="sidebar-section-body d-flex justify-content-center">
<h6 class="sidebar-resize-hide flex-grow-1 my-auto">Navigation</h6>
<div>
<button type="button" class="[button classes]">
<i class="ph-arrows-left-right"></i>
</button>
<button type="button" class="[button classes]">
<i class="ph-x"></i>
</button>
</div>
</div>
</div>
<!-- /header -->
[other content]
</div>
<!-- /sidebar content -->
</div>
<!-- /main sidebar -->
Here is an example of button inside 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="ph-arrows-left-right"></i>
</a>
</li>
...
</ul>
</div>
<!-- /navbar placement -->