Created by: crftwrk
The new offcanvas is a stand-alone component, but it should be able to display collapsed navbar as well. Created a navbar example which shows menu <992px (class navbar-expand-lg) in offcanvas component instead of the top open default navbar. navbar-expand{-sm|-md|-lg|-xl|-xxl} class can be used to set the breakpoints.
Demo: https://examples.bootscore.me/bootstrap-offcanvas-navbar/
As recommended in https://github.com/twbs/bootstrap/issues/33531, I open a PR here. It is the first time I do that, so please be patient for mistakes.
The idea is to add offcanvas component inside the navbar, open collapsed navbar in offcanvas and resetting the offcanvas by css below the breakpoints. The default body.offcanvas-backdrop::before does not work in this case, because backdrop overlaps open offcanvas as well. Here a div inside the navbar is used to create a backdrop.
To get this work, a bit of JavaScript is used. I have not the skills to write pure JavaScript, so I did it with jQuery which is linked via CDN in the index.html.
In the other examples i do not see any link to bootstrap.min.css or bootstrap.bundle.min.js. So I am a bit confused how the other examples work. In this case, I linked both files via CDN in index.html as well.