This is a replacement for #33537. Fixes #34098 (closed).
The original PR gives us a great starting point, and this PR builds on that by turning the static styles into source Sass that's generated by our breakpoints and is an official component modifier. The way this is built, the new .navbar-offcanvas-*
classes depend on .navbar-expand-*
classes, so you'll always need a pairing of the two. I think this is okay so as to avoid further duplication.
One thing that I'm unsure about is the .navbar-offcanvas.navbar-expand
situation, which basically says "don't ever use an offcanvas. I think we could omit the xs
.navbar-offcanvas
class entirely, but that might cause issues for others. Until then, it's kind of just useless as this combination will never show a button to open the offcanvas.
/cc @twbs/css-review @craftwerkberlin
Preview: https://deploy-preview-34273--twbs-bootstrap.netlify.app/docs/5.0/components/navbar/#offcanvas