Offcanvas Navbars

These navbars open collapsed content in offcanvas component. Resize browser window and click the navbar-toggler icon.

How it works

Component

The offcanvas component is placed inside the navbar and wraps the navbar content. Offcanvas is reset by css above the breakpoints. Set breakpoints by using navbar-expand{-sm|-md|-lg|-xl|-xxl} classes in navbar. Offcanvas can be placed on top, right, bottom and left by using offcanvas{-top|-end|-bottom|-start} classes.

Resize

Offcanvas must close when resizing the window through the breakpoints. Turning a tablet from portrait to landscape mode with expand-lg navbar will hide the offcanvas but not the backdrop and body scroll is still locked.

Add data-bs-hideresize="true" to offcanvas and it will close when resizing the window.

Colors

Navbar, offcanvas, offcanvas-header and offcanvas-body can use independent background-colors using the bg{-primary|-secondary|-success|-info|-warning|-danger|-light|-dark} classes. For example, the navbar can use the class bg-danger, but offcanvas-header bg-warning and offcanvas-body bg-dark.

Using navbar{-light|-dark} classes in navbar can be reset by adding offcanvas{-light|-dark} classes to offcanvas. This applies to nav-links only, not navbar-brand and navbar-toggler.

The fixed-top example uses navbar navbar-dark bg-dark but collapsed offcanvas uses white background. In this case class offcanvas-light class is added to offcanvas to show dark contrast nav-links in white offcanvas-body.

More Offcanvas

Offcanvas

This offcanvas is placed outside the <nav>...</nav> tag.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Other offcanvas-toggler can be used in navbar, but offcanvas component must be placed outside the <nav>...</nav> tag. Resize browser window to ≤991 px and click user-button and navbar-toggler.

Default Offcanvas (Does not close on resize)

Colored with scrolling

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.....

Backdroped with scrolling

Try scrolling the rest of the page to see this option in action.

Modal