YouTipBootstrap5 offcanvas sidebars are similar to modals and are commonly used on mobile devices.
Creating Sliding Navigation
We can control the display and hiding of the sidebar by using JavaScript to add or remove the .show class after the .offcanvas class:
.offcanvasHides content (default).offcanvas.showShows content
You can set up the sidebar using the href attribute of an <a> link or the data-bs-target attribute of a <button> element. Both cases require data-bs-toggle="offcanvas".
Here is an example of creating sliding navigation:
Example
Using link's href attributeSidebar
Sidebar Direction
The direction of the sidebar can be controlled using the following four classes:
.offcanvas-startDisplays on the left, as in the example above..offcanvas-endDisplays on the right.offcanvas-topDisplays at the top.offcanvas-bottomDisplays at the bottom
Example
Displays in Top Navbar
Example
Displays in Right Sidebar
Example
Displays in Bottom Navbar
Setting Background and Scrollability
We can set whether the <body> element is scrollable when the sidebar is open, and whether to display a backdrop. Use the data-bs-scroll attribute to set if the <body> is scrollable, and data-bs-backdrop to toggle the backdrop display.
Example
Body content is scrollable
Scroll the page to see the effect.
Using backdrop
Body content is not scrollable
Using backdrop, body content is scrollable
Scroll the page to see the effect.