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. Show
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. We're going to build 5 sidebars like this one. Here is what we're going to build: Download Sources Demo #1 Demo #2 Demo #3 Demo #4 Demo - Bonus section Originally, I published this tutorial for Bootstrap 3 in 2017. In 2018, I upgraded it to Bootstrap 4 and made additional improvements based on your feedback in 2020. The Bootstrap 3 version is a part of the download too, in case you would need it, though. Basic filesBefore we dig into coding, we should first set up our starting template with all the necessary files. In all four sidebar templates, that we'll go through today, we will need Bootstrap 4 CSS and JS files, jQuery library, and our custom stylesheet. Also, I include Font Awesome 5 to be used on the buttons and menu items in one example. So, our startup markup should be as follows:
Looking for a complete Bootstrap 4 template with a cool Bootstrap sidebar nav? Check out my Bootstrap 4 Dashboard or Bootstrap Material Admin. Both templates are free to download and use. 1. Static collapsible sidebar menuIn this part, we are going to build a simple Bootstrap 4 responsive sidebar that vertically scrolls along with the page. HTMLBasic document structureWe'll wrap everything in In this case, we'll give 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 contentNow, 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
Making dropdowns work
Be sure to add 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 By clicking the anchor, the dropdown will slide up or slide down according to the Sidebar toggle buttonNow 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.
CSSNow 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
After that, we'll give the sidebar a fixed width of 250px. As a result of using flexbox properties, page content 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 Sorry I did not come up with a better class name when I wrote this tutorial in 2017. On the desktops, It will have an opposite behavior on mobiles
where The We'll use this class later on in the JavaScript part, too.
As we do not know if the content will vertically fill the entire screen, we will set the minimum height of the sidebar to 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.
Styling dropdownsJust a little touch to the Bootstrap 4 drop-downs. We are using standard Bootstrap 4 class 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.
Media queryWe 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
Additional stylingThis 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.
JavaScriptThe idea here is to toggle the By
default, the sidebar will appear, i.e. it hasn't got After clicking the toggle button, the sidebar will be given a Re-clicking the toggle button will remove the Let's have a look at the code:
This completes our first example, let's have a look at what we've built. View Demo 2. Fixed positioned scrollable sidebarIn 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. HTMLThe approach in this example is similar to the previous sidebar navigation, therefore we can reuse the previous code. Our markup should be as following:
CSSAs we need a fixed height sidebar, we'll get rid of However the content extends, the sidebar still will take the entire viewport height. For this, we'll replace
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. JavaScriptThe 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.
|