How to Create a Responsive Navbar Sidebar "Drawer" in Bootstrap 5?

Create a responsive navbar sidebar "drawer" in Bootstrap?

Using Bootstrap 5 Beta 3 (update 2021)

Bootstrap now offers an Offcanvas component, making it easier to create sidebars.

Using Bootstrap 4 (original answer)

Considerations for Sidebars:

• Responsiveness
• Multi-level structure
• Toggleability
• Positioning (push vs. overlay, left or right)
• Fixed or sticky behaviour
• Animation style

Addressing the specific requirements:

1. Responsiveness:

• Update the right column class to col instead of col-auto.

2. Navbar Scrolling:

• Remove the sticky-top class from the navbar to prevent it from sticking.

3. Sticky Menu Button:

• The menu button should not be sticky, as it is not aligned with the sidebar.

4. Background Dimmer:

• This is not covered in this answer.

Example Sidebar with Enhanced Features:

This example sidebar closely resembles the one in the reference link and includes:

• Fixed width
• Auto-closing on smaller screens, opening on wider screens
• Toggleable on all widths
• Responsive overlay sidebar on smaller screens

Additional CSS for full version:

.w-sidebar {
    width: 200px;
    max-width: 200px;
}

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}

Demo: https://codeply.com/go/w1AMD1EY3c

The above is the detailed content of How to Create a Responsive Navbar Sidebar "Drawer" in Bootstrap 5?. For more information, please follow other related articles on the PHP Chinese website!