How can I implement a dynamic sidebar drawer in Bootstrap for my navbar?

Question

How can I implement a dynamic sidebar drawer in Bootstrap for my navbar?

Is it possible to achieve a layout similar to this example:

I've come across some online examples using different versions of bootstrap, but they tend to alter the css too much, making it harder to grasp the concepts of bootstrap.

I am curious if it is possible to accomplish this in Bootstrap 4 using features like collapse, stacked pills, and flexbox?

Here is my attempt: https://jsfiddle.net/kL9u6esw/20/

What I couldn't get right in my Jsfiddle :

Not fully responsive
The navbar doesn't scroll properly with the sticky class
The menu button doesn't remain sticky even though the class is set
A background dimmer, while not essential for the answer, would be a nice addition

In my example, I struggled with inserting a navbar, and I'm unsure if it is necessary for proper responsiveness.

Also, I'm uncertain if using columns is the correct approach, or if it should be done off-canvas.

HTML code :

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
          Lorem...
        </div>
      </div>
    </div>
  </div>
</div>

html css twitter-bootstrap bootstrap-4 web-frontend

Answer 1

Answer №1

Exciting updates on Bootstrap 5 Beta 3 (2021)

Great news! There is now an official Bootstrap 5 Offcanvas Component available, making the creation of sidebars a breeze. Of course, if you prefer not to use the Offcanvas component, you can still achieve the same effect with this sidebar example for Bootstrap 5

Bootstrap 4 (original answer)

Building sidebar navigations can be quite intricate, which is why Bootstrap may not offer a ready-made solution. When working with sidebars, there are several key considerations to keep in mind:

Responsiveness - how will the sidebar adapt based on screen size?
Multi-level structure - are there sub-level items in the navigation?
Toggle features - can the sidebar be easily toggled open or closed?
Positioning - will the sidebar push or overlay the page content?
Alignment - should the sidebar appear on the left or right side?
Scroll behavior - is the sidebar fixed or sticky during page scroll?
Animation style - how should the sidebar interact with the page?

In this scenario, instead of using col-auto for the right column, consider using col to ensure it fills the width when the menu is collapsed: https://jsfiddle.net/0rhyzu7o/

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
       ..
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
           ..
        </div>
      </div>
    </div>
  </div>
</div>

~~To enhance the animation smoothness, it may be necessary to override Bootstrap's default collapsing transition, which primarily operates based on height~~

UPDATE:

Responding to the bounty request, I have upgraded the sidebar with two additional examples. These examples closely resemble the reference and predominantly utilize Bootstrap classes.

Basic version

This version aligns closely with the reference and features the same slide left/right "drawer" animation.

Insert updated CSS code here

View the demonstration of the basic version here:

Comprehensive version (very similar to the reference):

This sidebar implementation includes:

Fixed-width setting
Automatic resizing on smaller screens, expansion on wider screens
Toggle behavior at any screen width
Responsive design - transforms into a fixed overlay on smaller viewports

While the comprehensive version involves additional CSS code, some sections are optional...

Insert detailed CSS and HTML code snippet here

View the demonstration of the comprehensive version here:

Both the basic and advanced examples bring you closer to the original reference. Customizing colors and styles to your preference is straightforward. Explore another variant with the sidebar overlay positioned above the toggle bar.

Also check out: Bootstrap Navbar Collapse to Overlay Sidebar

Answer 2

Exciting updates on Bootstrap 5 Beta 3 (2021)

Great news! There is now an official Bootstrap 5 Offcanvas Component available, making the creation of sidebars a breeze. Of course, if you prefer not to use the Offcanvas component, you can still achieve the same effect with this sidebar example for Bootstrap 5

Bootstrap 4 (original answer)

Building sidebar navigations can be quite intricate, which is why Bootstrap may not offer a ready-made solution. When working with sidebars, there are several key considerations to keep in mind:

Responsiveness - how will the sidebar adapt based on screen size?
Multi-level structure - are there sub-level items in the navigation?
Toggle features - can the sidebar be easily toggled open or closed?
Positioning - will the sidebar push or overlay the page content?
Alignment - should the sidebar appear on the left or right side?
Scroll behavior - is the sidebar fixed or sticky during page scroll?
Animation style - how should the sidebar interact with the page?

In this scenario, instead of using col-auto for the right column, consider using col to ensure it fills the width when the menu is collapsed: https://jsfiddle.net/0rhyzu7o/

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
       ..
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
           ..
        </div>
      </div>
    </div>
  </div>
</div>

~~To enhance the animation smoothness, it may be necessary to override Bootstrap's default collapsing transition, which primarily operates based on height~~

UPDATE:

Responding to the bounty request, I have upgraded the sidebar with two additional examples. These examples closely resemble the reference and predominantly utilize Bootstrap classes.

Basic version

This version aligns closely with the reference and features the same slide left/right "drawer" animation.

Insert updated CSS code here

View the demonstration of the basic version here:

Comprehensive version (very similar to the reference):

This sidebar implementation includes:

Fixed-width setting
Automatic resizing on smaller screens, expansion on wider screens
Toggle behavior at any screen width
Responsive design - transforms into a fixed overlay on smaller viewports

While the comprehensive version involves additional CSS code, some sections are optional...

Insert detailed CSS and HTML code snippet here

View the demonstration of the comprehensive version here:

Both the basic and advanced examples bring you closer to the original reference. Customizing colors and styles to your preference is straightforward. Explore another variant with the sidebar overlay positioned above the toggle bar.

Also check out: Bootstrap Navbar Collapse to Overlay Sidebar

Answer 3

Answer №2

Here is a potential resolution for points 1-3.

The solution to issue #1 was suggested by @zimsystem: "Instead of using col-auto on the right column, use col. This way, it will expand to fill the width when the menu is collapsed."

To address problem #2, you must remove h-100 from the first row and column:

<div class="container-fluid h-100">
  <div class="row *h-100*">
     <div class="col-5 col-md-3 collapse m-0 p-0 *h-100* bg-dark" id="collapseExample">
     ...
     </div>
  </div>
</div>

(this code snippet is incorrect, I highlighted the classes to be deleted with asterisks)

After making this adjustment, the menu column will expand to match the full length of the content column.

To tackle issue #3, simply relocate the button from a sub-column to the main column. It was previously confined within the mini column you had assigned it to.

<div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">

     <div class="col-12">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in...
     </div>

Furthermore, I have included some CSS for the menu just in case you end up with more links than the example provides. This will ensure proper scrolling if the list exceeds the screen size.

.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

The complete code for this solution can be found below:

body{
  height : 100vh;
  overflow : scroll;
}

.collapse.width.show {
    transition: max-width .3s ease, min-width .3s ease;
    width: 100%;
    max-width: 100%;
    min-width: initial;
}
.collapse.width,
.collapsing.width {
   max-width: 0;
   min-width: 0;
   width: 0;
   transition: all .2s ease;
}
.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-5 col-md-3 collapse width m-0 p-0 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top"> 
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">
       
        <div class="col-12">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lectus in nibh facilisis luctus. Maecenas sagittis pellentesque sapien, vitae dignissim nisl luctus interdum. Aenean risus justo, vestibulum ultrices posuere ornare, consectetur ac enim. Pellentesque...
        </div>
      </div>
    </div>
  </div>
</div><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Let me know how it works out!

Answer 4

Here is a potential resolution for points 1-3.

The solution to issue #1 was suggested by @zimsystem: "Instead of using col-auto on the right column, use col. This way, it will expand to fill the width when the menu is collapsed."

To address problem #2, you must remove h-100 from the first row and column:

<div class="container-fluid h-100">
  <div class="row *h-100*">
     <div class="col-5 col-md-3 collapse m-0 p-0 *h-100* bg-dark" id="collapseExample">
     ...
     </div>
  </div>
</div>

(this code snippet is incorrect, I highlighted the classes to be deleted with asterisks)

After making this adjustment, the menu column will expand to match the full length of the content column.

To tackle issue #3, simply relocate the button from a sub-column to the main column. It was previously confined within the mini column you had assigned it to.

<div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">

     <div class="col-12">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in...
     </div>

Furthermore, I have included some CSS for the menu just in case you end up with more links than the example provides. This will ensure proper scrolling if the list exceeds the screen size.

.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

The complete code for this solution can be found below:

body{
  height : 100vh;
  overflow : scroll;
}

.collapse.width.show {
    transition: max-width .3s ease, min-width .3s ease;
    width: 100%;
    max-width: 100%;
    min-width: initial;
}
.collapse.width,
.collapsing.width {
   max-width: 0;
   min-width: 0;
   width: 0;
   transition: all .2s ease;
}
.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-5 col-md-3 collapse width m-0 p-0 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top"> 
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">
       
        <div class="col-12">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lectus in nibh facilisis luctus. Maecenas sagittis pellentesque sapien, vitae dignissim nisl luctus interdum. Aenean risus justo, vestibulum ultrices posuere ornare, consectetur ac enim. Pellentesque...
        </div>
      </div>
    </div>
  </div>
</div><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Let me know how it works out!

How can I implement a dynamic sidebar drawer in Bootstrap for my navbar?

Answer №1

UPDATE:

Answer №2

Similar questions

Is there a way to properly size and align an inline image within a dynamically resizing DIV element?

Styling the React Material UI DataGrid with the MuiDataGrid-window class using createMuiTheme or makeStyles / styled-components

What causes Chrome Extension Images to appear broken when they are inserted into the DOM?

THREE.js: dual scenes sharing identical camera positions

Limiting the size of textboxes in Twitter Bootstrap

Solving relative paths in NodeJS/Express

The Jquery slider panel seems to be stuck open even after I switched its CSS orientation from right to left

Customizing jQuery dialog: What is the best way to change the appearance of the close button?

How to create a self-contained div in VueJS using Tailwind CSS without affecting other elements

React component utilizes Material UI to detect scrolling within a table

Swap out the HTML button element for text once the form is submitted

What causes the bootstrap grid system to deviate from the intended column sizes?

Switching the character from "." to "|" between portfolio categories on a WordPress website: Step-by-step guide

Can search engines understand and interpret CSS files?

Navigating the battleground between native and HTML5 mobile applications

JavaScript: How can I remove it when I click anywhere on the webpage with onClick?

Is it possible to enlarge a div using "display: table-cell" property when clicked on?

What is the best way to adjust the color of the colon within my timer digits using a span element?

Using jQuery to toggle the visibility of divs depending on the selection of multiple checkboxes

Scrolling Horizontally with a <div> containing <a> and <img> elements