Sidebar menu responsive bootstrap 4
Today I’d like to show you how to create a collapsible HTML sidebar navigation using Bootstrap 4 with some CSS and jQuery.
Since Bootstrap 4 nor Bootstrap 3 don't provide any sidebar menu, we will build 5 separate solutions. Each of them will have slightly different features and design, so you can choose one that serves your needs.
In each part of the tutorial, I will guide you step by step through all
the necessary steps in HTML, CSS, and JavaScript.
Home
About
Pages
Portfolio
Contact
Making dropdowns work
- To make a drop-down menu
collapsible,
data-toggle="collapse"
should be added to the link holding the dropdown. - Note that I also added
class="dropdown-toggle"
- this class adds a little triangle on the side and helps the user understand its function. - The link's
href
attribute must contain the id
of the dropdown menu preceded by a hash. In this case, I used #homeSubmenu
. - The dropdown menu itself also should have
.collapse
class too.
Pages
Be sure to add aria-expanded
to the dropdown's
control element Home
About
Pages
Portfolio
Contact
CSS
As we need a fixed height sidebar, we'll get rid of align-items
property that stretched
items vertically.
However the content extends, the sidebar still will take the entire viewport height. For this, we'll replace min-height: 100vh
with height: 100vh
.
.wrapper {
display: flex;
width: 100%;
}
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
At this point, we've finished all the CSS modifications.
We'll add two extra tricks in the JavaScript, let's have a look at them now.
JavaScript
The first trick is that I'll replace the default browser scrollbar in the side menu with a custom one.
We will need the scrollbar to appear just in
cases when the navigation would be too high to fit in the viewport.
For this purpose, I'll use a jQuery custom content scroller.
Let's add its JS file to our HTML file first.
And its stylesheet file to the
element:
Now, let's initialize the plugin and use some of its options
$[document].ready[function [] {
$["#sidebar"].mCustomScrollbar[{
theme: "minimal"
}];
$['#sidebarCollapse'].on['click', function [] {
$['#sidebar'].toggleClass['active'];
}];
}];
The second trick we'll use is that I'll minimize the open dropdowns
when the sidebar closes.
The reason for this is to keep things consistent and to open a navbar with closed dropdowns every time.
$[document].ready[function [] {
$["#sidebar"].mCustomScrollbar[{
theme: "minimal"
}];
$['#sidebarCollapse'].on['click', function [] {
// open or close navbar
$['#sidebar'].toggleClass['active'];
// close dropdowns
$['.collapse.in'].toggleClass['in'];
// and also adjust aria-expanded attributes we use for the open/closed arrows
// in our CSS
$['a[aria-expanded=true]'].attr['aria-expanded', 'false'];
}];
}];
To clarify what we have done here:
The class .in
is responsible for opening the dropdown menu. If the dropdown has one, it's open, if not, it's closed.
We told our JavaScript that if this class is present, please remove it. Also, please change the aria-expanded
value from true
to false
so the arrow will return to its
logical direction.
This makes our fixed sidebar navigation complete. Let's have a look at what we've built.
View Demo
3. Fixed scrollable sidebar menu with a content overlay
In this approach, we'll make a side navbar similar to the one that Google uses for its navbars on tablets and mobile phones in
Material design.
The sidebar will cover the left part of the page content when it's open and the rest of the content will be covered by a dark transparent overlay.
Home
About
Pages
Portfolio
Contact
CSS
The sidebar will have a fixed position at the left part of the screen, and the content will occupy the
full screen all the time.
By default, the sidebar will be hidden.
When the toggle button is clicked, both .overlay
and the sidebar will appear above the content.
Let's imagine it as layers.
The page content will be the back layer, .overlay
will be the middle layer with a transparent black color.
The overlay will cover the content of the
page to allow the user's eye to easily focus on the sidebar itself.
Finally, the sidebar will be the front layer.
To achieve this layering behavior, we will simply use the z-index
property.
As mentioned before, we will be also adding a #dismiss
button to the sidebar.
It will be positioned absolutely, at its top-right part.
.wrapper {
display: block;
}
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
/* top layer */
z-index: 9999;
}
.overlay {
display: none;
position: fixed;
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba[0, 0, 0, 0.7];
/* middle layer, i.e. appears below the sidebar */
z-index: 998;
opacity: 0;
/* animate the transition */
transition: all 0.5s ease-in-out;
}
/* display .overlay when it has the .active class */
.overlay.active {
display: block;
opacity: 1;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
}
JavaScript
In two previous sidebars, the toggle button functionality was to open/close the sidebar.
Here, we already have a close button inserted in our sidebar, so the toggle button function is only to open the sidebar.
To clarify the mechanism, by clicking the toggle button both overlay and sidebar appear, and by clicking the sidebar close button, both overlay and sidebar disappear.
$[document].ready[function [] {
$["#sidebar"].mCustomScrollbar[{
theme: "minimal"
}];
$['#dismiss, .overlay'].on['click', function [] {
// hide sidebar
$['#sidebar'].removeClass['active'];
// hide overlay
$['.overlay'].removeClass['active'];
}];
$['#sidebarCollapse'].on['click', function [] {
// open sidebar
$['#sidebar'].addClass['active'];
// fade in the overlay
$['.overlay'].addClass['active'];
$['.collapse.in'].toggleClass['in'];
$['a[aria-expanded=true]'].attr['aria-expanded', 'false'];
}];
}];
This is it.
Time to check the demo.
View Demo
4. Partially collapsing
static Bootstrap sidebar
In this example, we will, instead of building a sidebar that collapses entirely, build a Partially collapsing side navbar. The side menu will convert itself into a compressed version after the toggle button click.
Let's use the first examples's markup as a starting point.
Home
About
Pages
CSS
Instead of pushing the sidebar entirely out of the screen,
we'll just shrink its width, and restyle its content to fit this new width.
The styles of the compressed version will be added to the class .active
.
For example, we will downsize the font size of the anchors' text, align it to the center, and make it render below the icon.
Also, we will move the arrow to the very bottom of every anchor, or adjust the padding around the dropdown links.
The code will be as follows:
/* Shrinking the sidebar from 250px to 80px and center aligining its content*/
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/
#sidebar .sidebar-header strong {
display: none;
}
#sidebar.active .sidebar-header h3 {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
/* Same dropdown links padding*/
#sidebar.active ul ul a {
padding: 10px !important;
}
/* Changing the arrow position to bottom center position,
translateX[50%] works with right: 50%
to accurately center the arrow */
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX[50%];
-ms-transform: translateX[50%];
transform: translateX[50%];
}
Media queries
On smaller screens, we'll keep the compressed version as a default active state of the sidebar. I.e., the uncompressed version will not be used on mobiles at all and the compressed version will become visible after clicking the toggle button.
To achieve this, we can only copy the styles from .active
to our mobile media query @media [max-width: 768px]
and add a margin-left
functionality to it.
For mobiles, #sidebar.active
sidebar
will have a negative left margin [it will be off the canvas] and the #sidebar
without the .active
class will have margin-left
set to 0.
@media [max-width: 768px] {
/* 80px and its content aligned to centre. Pushing it off the screen with the
negative left margin
*/
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
/* Reappearing the sidebar on toggle button click */
#sidebar {
margin-left: 0;
}
/* Toggling the sidebar header content,
hide the big heading [h3] and showing the small heading [strong] and vice versa
*/
#sidebar .sidebar-header strong {
display: none;
}
#sidebar.active .sidebar-header h3 {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
/* Downsize the navigation links font size */
#sidebar.active ul li a {
padding: 20px 10px;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
/* Adjust the dropdown links padding*/
#sidebar.active ul ul a {
padding: 10px !important;
}
/* Changing the arrow position to bottom center position,
translateX[50%] works with right: 50%
to accurately center the arrow */
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX[50%];
-ms-transform: translateX[50%];
transform: translateX[50%];
}
}
JavaScript
We will not include any additional lines of JavaScript and we'll just use the same function did use in the first sidebar.
$[document].ready[function [] {
$['#sidebarCollapse'].on['click', function [] {
$['#sidebar'].toggleClass['active'];
}];
}];
That will be all for now. We should have a nicely working partially collapsing sidebar.
Let's have a look at the results.
View Demo
Further Improvements
There is always room for further improvements and tweaks.
As a bonus, I would like to show you how to prepare an animated hamburger menu icon for the toggle button, and also how to add eye-catching animation for the opening and closing of the sidebar panel.
Home
About
Pages
Portfolio
Contact
CSS
Animating the toggle button
Let's add some styles to the button and
its bars first.
There'll be three bars under each other and we'll give them a fancy transition with a cubic-bezier
transition. I often use this CSS animation tool to produce cool transitions, you can choose from some pre-build transitions or make your custom one easily.
#sidebarCollapse {
width: 40px;
height: 40px;
background: #f5f5f5;
}
#sidebarCollapse span {
width: 80%;
height: 2px;
margin: 0 auto;
display: block;
background: #555;
transition: all 0.8s cubic-bezier[0.810, -0.330, 0.345, 1.375];
}
When the sidebar is open, the toggle button bars will be crossed.
When it's off the canvas, the bars will be parallel to each other.
By default, the sidebar will be open, so the initial state of the bars should be crossed. We'll use a transform
property to achieve that.
The first bar will be rotated by 45 degrees, the last bar will be rotated by 45 degrees in the opposite direction. The second bar will be hidden at this moment.
#sidebarCollapse span:first-of-type {
/* rotate first one */
transform: rotate[45deg] translate[2px, 2px];
}
#sidebarCollapse span:nth-of-type[2] {
/* second one is not visible */
opacity: 0;
}
#sidebarCollapse span:last-of-type {
/* rotate third one */
transform: rotate[-45deg] translate[1px, -1px];
}
By
clicking the button, the bars should transform into a parallel state. To achieve that, we will use jQuery to toggle the .active
class on the button. This class resets the rotation of the bars and makes them all visible.
#sidebarCollapse.active span {
/* no rotation */
transform: none;
/* all bars are visible */
opacity: 1;
margin: 5px auto;
}
Animating the sidebar
Now, let's add a 3D CSS animation to the sidebar.
We'll make a door-opening animation when the user closes or opens the
sidebar.
First of all, we should add perspective
property to the container.
Our container, in this case, is .wrapper
. The perspective
property defines how many pixels a 3D element is placed from the view, and allows you to change the perspective on how 3D elements are viewed.
Then, we'll rotate the sidebar vertically by 100 degrees during collapsing out using transform
property.
The transform-origin
property allows you to
change the position of transformed elements. Here, we'll rotate the sidebar from the center-left side.
.wrapper {
display: flex;
align-items: stretch;
perspective: 1500px;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.6s cubic-bezier[0.945, 0.020, 0.270, 0.665];
transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
}
#sidebar.active {
margin-left: -250px;
transform: rotateY[100deg]; /* Rotate sidebar vertically by 100 degrees. */
}
Media Queries
On smaller screens, the sidebar will be collapsed out by default.
The default state of the hamburger menu should be returned to the parallel state. To achieve this, we should switch the CSS rules from the standard view.
@media [max-width: 768px] {
/* Reversing the behavior of the sidebar:
it'll be rotated vertically and off canvas by default,
collapsing in on toggle button click with removal of
the vertical rotation. */
#sidebar {
margin-left: -250px;
transform: rotateY[100deg];
}
#sidebar.active {
margin-left: 0;
transform: none;
}
/* Reversing the behavior of the bars:
Removing the rotation from the first,
last bars and reappear the second bar on default state,
and giving them a vertical margin */
#sidebarCollapse span:first-of-type,
#sidebarCollapse span:nth-of-type[2],
#sidebarCollapse span:last-of-type {
transform: none;
opacity: 1;
margin: 5px auto;
}
/* Removing the vertical margin and make the first and last bars rotate again when the sidebar is open, hiding the second bar */
#sidebarCollapse.active span {
margin: 0 auto;
}
#sidebarCollapse.active span:first-of-type {
transform: rotate[45deg] translate[2px, 2px];
}
#sidebarCollapse.active span:nth-of-type[2] {
opacity: 0;
}
#sidebarCollapse.active span:last-of-type {
transform: rotate[-45deg] translate[1px, -1px];
}
}
JavaScript
We'll use jQuery to toggle the .active
class to switch between the crossed and parallel states.
$[document].ready[function [] {
$['#sidebarCollapse'].on['click', function [] {
$['#sidebar'].toggleClass['active'];
$[this].toggleClass['active'];
}];
}];
Let's have a look at the result.
View Demo
Conclusion
I hope this tutorial has helped you to understand how to add a Bootstrap sidebar to your project. If you liked the article - let your friends know about it.
If you have enjoyed this Bootstrapious tutorial, have a look at my tutorials on
How to build a contact form or Bootstrap navbar.
Thanks for reading :]
How do I create a right side menu in bootstrap 4?
ml-auto class of Bootstrap 4 to align navbar items to the right. The . ml-auto class automatically gives a left margin and shifts navbar items to the right.
How do you make a sidebar collapsible?
Example.
height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ ... .
padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; ... .
position: absolute; top: 0; right: 25px; ... .
font-size: 20px; cursor: pointer; background-color: #111;.
How do I change the width of a sidebar in bootstrap?
To implement the fixed width sidebar on Bootstrap, we need to create 2 new CSS grid styles: col-fluid and col-fixed . These two grid classes will be used instead of the Bootstrap's default col-* classes. col-fixed will be used for the sidebar and col-fluid will be used for the main content.
How do you add a sidebar in HTML?
You can add menu items in that space if you want..
Step 1: Create a basic html structure to create sidebars. ... .
Step 2: Design the background using css code. ... .
Step 3: Add profile images and titles. ... .
Step 4: Add menu items in the sidebar. ... .
Step 5: Design menu items with css code. ... .
Step 6: Create navigation bar..