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.
Pages
- Page 1
- Page 2
- Page 3
- Page 1
- Page 2
- Page 3
In this case, we'll give Pages
- Page 1
- Page 2
- Page 3
- Page 1
- Page 2
- Page 3
By doing this, the sidebar nav will take the height of the page content. As the content increases, sidebar height dynamically increases too.
...
Sidebar menu and its content
Now, let's fill our sidebar with some content.
I'll place there a sidebar navigation menu that will contain some demo navigation links and also Bootstrap 4 drop-down menus.
Note, that we also added an Pages
- Page 1
- Page 2
- Page 3
Bootstrap Sidebar
-
Home
- Home 1
- Home 2
- Home 3
- About
-
Pages
- Page 1
- Page 2
- Page 3
- Portfolio
- Contact
Dummy Heading
Making dropdowns work
- To make a drop-down menu collapsible, Pages
- Page 1
- Page 2
- Page 3
- Note that I also added Pages
- Page 1
- Page 2
- Page 3
- The link's Pages
- Page 1
- Page 2
- Page 3
Toggle Sidebar
0 of the dropdown menu preceded by a hash. In this case, I usedToggle Sidebar
1. - The dropdown menu itself also should have
Toggle Sidebar
2 class too.
- Page 1
- Page 2
- Page 3
Be sure to add
Toggle Sidebar
3 to the dropdown's control element
Toggle Sidebar
4.This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies.
If the collapsible element is closed by default, it should have a value of
Toggle Sidebar
5. If you've set the collapsible element to be open, by default using a
Toggle Sidebar
6 class, set
Toggle Sidebar
7 on the control instead.By clicking the anchor, the dropdown will slide up or slide down according to the
Toggle Sidebar
Sidebar toggle button
Now it's time to add the sidebar toggle button. This button will handle the opening and closing of the sidebar.
We will place it outside the sidebar. It doesn't matter where it is located in your content, as long as it's outside the sidebar, i.e. visible all the time.
Let's place it into the Bootstrap navbar in the content div.
Toggle Sidebar
CSS
Now it's time to finally apply some styling to our sidebar.
The most important thing for this approach is to use the flex property for the Pages
- Page 1
- Page 2
- Page 3
After that, we'll give the sidebar a fixed width of 250px.
As a result of using flexbox properties, page content .wrapper { display: flex; width: 100%; align-items: stretch; }1 will take the remaining width of Pages
- Page 1
- Page 2
- Page 3
Then, we'll use the sidebar's width to push the element out of the screen when we don't need it. This behavior will be applied when the sidebar has a Pages
- Page 1
- Page 2
- Page 3
Sorry I did not come up with a better class name when I wrote this tutorial in 2017.
On the desktops, .wrapper { display: flex; width: 100%; align-items: stretch; }5 will mean that the sidebar is hidden and .wrapper { display: flex; width: 100%; align-items: stretch; }6 only that it's visible.
It will have an opposite behavior on mobiles where .wrapper { display: flex; width: 100%; align-items: stretch; }5 is when the sidebar is visible and .wrapper { display: flex; width: 100%; align-items: stretch; }6 is hidden.
The Pages
- Page 1
- Page 2
- Page 3
We'll use this class later on in the JavaScript part, too.
.wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; } #sidebar.active { margin-left: -250px; }As we do not know if the content will vertically fill the entire screen, we will set the minimum height of the sidebar to .wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; } #sidebar.active { margin-left: -250px; }1. .wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; } #sidebar.active { margin-left: -250px; }2 is a CSS unit that refers to the viewport height.
This means that the initial height of the sidebar will be at least equal to the screen height. Also, its height will increase when the page content would increase.
#sidebar { min-width: 250px; max-width: 250px; min-height: 100vh; }Styling dropdowns
Just a little touch to the Bootstrap 4 drop-downs.
We are using standard Bootstrap 4 class .wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; } #sidebar.active { margin-left: -250px; }3.
This class adds a small triangle next to the drop-down links.
To unify the links' appearance, we will move the triangle, that usually sits next to the text, to the right part of the sidebar with the following CSS code.
a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }Media query
We will need slightly different behavior for the sidebar on the smaller screens.
Instead of appearing by default, it'll be hidden and appear only after clicking the toggle button.
Like this, we will save valuable space for your content and show the navigation to the user only when needed.
Basically, what we need to do here is to reverse the Pages
- Page 1
- Page 2
- Page 3
Additional styling
This would be all regarding the necessary CSS styling that is needed to make your sidebar work.
To give it a more fancy look, I have styled it a bit more.
It is all included in the download package, so I will just quickly mention it here without any further comments.
...
0
JavaScript
The idea here is to toggle the Pages
- Page 1
- Page 2
- Page 3
By default, the sidebar will appear, i.e. it hasn't got Pages
- Page 1
- Page 2
- Page 3
After clicking the toggle button, the sidebar will be given a Pages
- Page 1
- Page 2
- Page 3
Re-clicking the toggle button will remove the Pages
- Page 1
- Page 2
- Page 3
Let's have a look at the code:
...
1
This completes our first example, let's have a look at what we've built.
View Demo
2. Fixed positioned scrollable sidebar
In this part, we'll make a similar sidebar but it will be fixed. This means that it won't scroll along with the page but it will stay fixed at the same place. This will apply only to larger devices with a viewport width of 768px+. The whole page will be responsive, too.
Home- Home 1
- Home 2
- Home 3
- Page 1
- Page 2
- Page 3
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- Home 1
- Home 2
- Home 3
- Page 1
- Page 2
- Page 3
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 Pages
- Page 1
- Page 2
- Page 3
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:
Bootstrap Sidebar
-
Home
- Home 1
- Home 2
- Home 3
- About
-
Pages
- Page 1
- Page 2
- Page 3
- Portfolio
- Contact
Dummy Heading
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 Pages
- Page 1
- Page 2
- Page 3
For mobiles, .wrapper { display: flex; width: 100%; align-items: stretch; }5 sidebar will have a negative left margin (it will be off the canvas) and the .wrapper { display: flex; width: 100%; align-items: stretch; }6 without the Pages
- Page 1
- Page 2
- Page 3
Bootstrap Sidebar
-
Home
- Home 1
- Home 2
- Home 3
- About
-
Pages
- Page 1
- Page 2
- Page 3
- Portfolio
- Contact
Dummy Heading
JavaScript
We will not include any additional lines of JavaScript and we'll just use the same function did use in the first sidebar.
...
1
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- Home 1
- Home 2
- Home 3
- Page 1
- Page 2
- Page 3
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 @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } }1 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.
Bootstrap Sidebar
-
Home
- Home 1
- Home 2
- Home 3
- About
-
Pages
- Page 1
- Page 2
- Page 3
- Portfolio
- Contact
Dummy Heading
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 @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } }2 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.
Bootstrap Sidebar
-
Home
- Home 1
- Home 2
- Home 3
- About
-
Pages
- Page 1
- Page 2
- Page 3
- Portfolio
- Contact
Dummy Heading
By clicking the button, the bars should transform into a parallel state. To achieve that, we will use jQuery to toggle the Pages
- Page 1
- Page 2
- Page 3
Bootstrap Sidebar
-
Home
- Home 1
- Home 2
- Home 3
- About
-
Pages
- Page 1
- Page 2
- Page 3
- Portfolio
- Contact
Dummy Heading
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 @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } }4 property to the container.
Our container, in this case, is Pages
- Page 1
- Page 2
- Page 3
Then, we'll rotate the sidebar vertically by 100 degrees during collapsing out using @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } }2 property.
The @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } }8 property allows you to change the position of transformed elements. Here, we'll rotate the sidebar from the center-left side.
Bootstrap Sidebar
-
Home
- Home 1
- Home 2
- Home 3
- About
-
Pages
- Page 1
- Page 2
- Page 3
- Portfolio
- Contact
Dummy Heading
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.
Pages- Page 1
- Page 2
- Page 3
JavaScript
We'll use jQuery to toggle the Pages
- Page 1
- Page 2
- Page 3
- Page 1
- Page 2
- Page 3
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.