Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a Collapsed Sidebar?

  • Last Updated : 09 Jul, 2019

Bootstrap Sidebar is a component that is used for vertical navigation. It can be customized in various styles according to your requirement by using CSS and can be made responsive by using JavaScript.

Creating a Simple SideBar:

The .sidebar class is used to create simple Bootstrap sidebar. To make a collapsing sidebar, you need to have a bit of JavaScript Knowledge as well, as it would be used to open and close the sidebar, would make your sidebar responsive.


        /*Position and style for the sidebar*/
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            /*Stays in place */
            background-color: green;
            overflow-x: hidden;
            /*for Disabling horizontal scroll */
        /* Position and style for the sidebar links */
        .sidebar a {
            padding: 10px 10px 10px;
            font-size: 25px;
            color: #111;
            display: block;
            transition: 0.3s;
        /* the links change color when mouse hovers upon them*/
        .sidebar a:hover {
            color: #FFFFFF;
        /* Position and style the for cross button */
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
        /* Style for the sidebar button */
        .openbtn {
            font-size: 32px;
            background-color: #008000;
            color: #111;
            padding: 10px 10px 10px;
            border: none;
        /* the sidebar button changes 
      color when mouse hovers upon it */
.openbtn:hover {
  color: #FFFFFF;
      /* pushes the page content to the right
      when you open the side navigation */
        #main {
            transition: margin-left .5s;
            /* If you want a transition effect */
            padding: 10px;
    <div id="sidebar" class="sidebar">
        <a href="javascript:void(0)" 
        <!--the cross button-->
        <a href="#">India</a>
        <a href="#">Nepal</a>
        <a href="#">Srilanka</a>
        <a href="#">Myanmar</a>
    <div id="main">
        <button class="openbtn" 
        <!-- for the sidebar button-->
    /* Sets the width of the sidebar 
    to 250 and the left margin of the 
    page content to 250 */
    function openNav() {
          "sidebar").style.width = "250px";
          "main").style.marginLeft = "250px";
    /* Set the width of the sidebar 
    to 0 and the left margin of the 
    page content to 0 */
    function closeNav() {
          "sidebar").style.width = "0";
          "main").style.marginLeft = "0";


By running these three codes you can make a simple collapsing sidebar. You can further add more CSS features to make it even better according to your requirement.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!