Sidebar
The sidebar class is supposed to be used in a markup like:
<div class="row">
<div class="col-12 sidebar">
Sidebar
</div>
<div class="col">
Page content
</div>
</div>
Collapsible
The example below is styled a little different from the example code so that the visuals will be better.
Tip! The toggle button can be placed in the navbar.
<button class="btn btn-primary d-lg-none" onclick="toggleSidebar('exampleSidebar')">Toggle sidebar</button>
<div class="row mx-0">
<div class="col-12 sidebar sidebar-collapse" id="exampleSidebar" style="min-height: initial; height: 200px;">
Sidebar
</div>
<div class="col">
Page content
</div>
</div>
Responsive
The sidebar is treated lite a column with limitations. We don't want it to grow past a certain width of 250px except on smaller devices where we want it to fill the viewport width and collapse so that it can be treated like an ordinary nav.
We can control the breakpoint for when it happens with a .sidebar-bp-* class. Mostly a medium viewport is ok.
| .sidebar-bp-sm | Sidebar is 100% up to a small (sm) viewport, then it's 250px wide. |
| .sidebar-bp-md | Sidebar is 100% up to a medium (md) viewport, then it's 250px wide. |
| .sidebar-bp-lg | Sidebar is 100% up to a large (lg) viewport, then it's 250px wide. |
| .sidebar-bp-xl | Sidebar is 100% up to a extra large (xl) viewport, then it's 250px wide. |
<div class="row">
<div class="col-12 sidebar sidebar-bp-md">
Sidebar
</div>
<div class="col">
Page content
</div>
</div>
The sidebar has a max-width of 250px and will fill the whole viewport height. It also has a padding on all sides.
Styles
There are three styles for the sidebar; regular (dark), light and white.
<div class="row">
<div class="col-12 sidebar sidebar-bp-md">
<p>Regular sidebar</p>
<hr>
<p><a href="#">A link</a></p>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md sidebar-light">
<p>Light sidebar</p>
<hr>
<p><a href="#">A link</a></p>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md sidebar-white">
<p>White sidebar</p>
<hr>
<p><a href="#">A link</a></p>
</div>
</div>
Positioning
As default, the sidebar is meant to be on the left side of the main content. It can how ever be placed to the right using either html markup or the order property (order: 2;).
When you are placing the sidebar to the right and are using the white theme (.sidebar-white) the border will be placed on the wrong side. Use the .sidebar-right class to style it for a right placement.
<div class="row">
<div class="col-12 sidebar sidebar-bp-md sidebar-white">
Left/regular sidebar
</div>
<div class="col">
Page content
</div>
</div>
<div class="row">
<div class="col">
Page content
</div>
<div class="col-12 sidebar sidebar-bp-md sidebar-white sidebar-right">
Right sidebar
</div>
</div>
Images
Images in the sidebar has a max-width of 100%.
Menu
The menu class is meant to be used inside the sidebar and adapts itself depending on the style of the sidebar.
<div class="row">
<div class="col-12 sidebar sidebar-bp-md">
<div class="menu">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md sidebar-light">
<div class="menu">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md sidebar-white">
<div class="menu">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
There are three different sizes that affect the padding on the y-axis. The middle one is default.
<div class="row">
<div class="col-12 sidebar sidebar-bp-md">
<div class="menu menu-lg">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md">
<div class="menu">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md">
<div class="menu menu-sm">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
They are even compatible with the theme colors to give the active menu items a nice touch.
<div class="row">
<div class="col-12 sidebar sidebar-bp-md">
<div class="menu menu-primary">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md sidebar-light">
<div class="menu menu-success">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12 sidebar sidebar-bp-md sidebar-white">
<div class="menu menu-dark">
<ul>
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item active"><a href="#">Link 3 (active)</a></li>
</ul>
</div>
</div>
</div>