Preview Loading...
Script Action
Bootstrap 5 CSS https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css COPY CDN
Bootstrap 5 JS https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js COPY CDN
Icons https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css COPY CDN

Add Comment/Questions

11 day's ago

CrisH ( crish-50115 )

Thank you perfect job. It is working with last Bootstrap, I verified. It is working perfectly if it on clean page... if you already have some CSS or can conflicts...

23 day's ago

BBBootstrap Team ( bbbootstrap62244 )

@crakonit-75529 What problem are you getting? it might be due to bootstrap version conflict! kindly check!

24 day's ago

crakonit ( crakonit-75529 )

Would love to use it, but it is full of bugs! Comments make it even more confusing!

24 day's ago

DjSt3rios ( djst3rios-74487 )

Thank you for sharing this! I do have a question though, it seems like on mobile(Using responsive design mode) it's broken, the bar is not visible at first and when I click the button to expand the nav bar and show the text, it shows just the icons instead (like it has to be moved to the left even more). Any tips on fixing this would be great!

30 day's ago

Diogo Dubiella ( diogo-dubiella-36725 )

@isuru-32742 - 1. On >body oncontextmenu='return false' class='snippet-body body-pd'< add "body-pd" to class - 2. add >header class="header body-pd" id="header"< "body-pd" to class - 3. >div class="l-navbar show" id="nav-bar"< add "show" to class

30 day's ago

Diogo Dubiella ( diogo-dubiella-36725 )

@isuru-32742 To invert: 1. On add "body-pd" to class 2. add "body-pd" to class 3. add "show" to class

1 month ago

alvaro lordelo ( alvaro-lordelo-61321 )

01 - To start the menu with active defaults, should we use the call function "showNavBar"? 02 - there's a white column near the navBar, is it a problem?

1 month ago

Hiram Hernandez ( hiram-hernandez-61881 )

Solved it... change the class .show on the template for another one, it makes a bug with the class .show from bootstrap... ;)

1 month ago

Hiram Hernandez ( hiram-hernandez-61881 )

Modal is opening on the sidebar and not on all the screen :/

1 month ago

Isuru ( isuru-32742 )

How to expand menu in first time load here it's hide

4 month's ago

Alper EM ( alper-em-18501 )

Hello thank you for sharing this but when i change the oriantation i cannot scroll the sidebar could you please tell me how can i do that?

About this snippet

Bootstrap 5 sidebar menu with toggle button snippet is created by BBBootstrap Team using Bootstrap 5, Javascript. This snippet is free and open source hence you can use it in your project.Bootstrap 5 sidebar menu with toggle button snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Join BBBootstrap community

Contribute an awesome snippet to help other developer and designers