Example

Build hidden sidebars into your project for navigation, shopping carts, and more

Placement

Places offcanvas on the left (shown previously), right, or bottom.

User agreement

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga autem ea porro cum maiores modi incidunt consectetur voluptatem distinctio quibusdam, eos quae est perferendis cumque illo placeat quasi pariatur. Autem facilis ducimus voluptatibus alias odio, suscipit delectus maiores. Sint ad cum amet unde sunt? Accusamus accusantium molestiae autem quas ab harum, assumenda quo consequuntur, exercitationem magni maxime saepe eius totam ad et non alias eum pariatur rem eaque odio aspernatur laudantium reprehenderit fugiat. Earum odit corporis quibusdam provident officiis esse voluptatum aliquam? Sapiente assumenda vel tempora omnis facilis laboriosam? Perspiciatis aspernatur delectus, alias in iste sed? Similique, debitis neque. Atque?

User agreement

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga autem ea porro cum maiores modi incidunt consectetur voluptatem distinctio quibusdam, eos quae est perferendis cumque illo placeat quasi pariatur. Autem facilis ducimus voluptatibus alias odio, suscipit delectus maiores. Sint ad cum amet unde sunt? Accusamus accusantium molestiae autem quas ab harum, assumenda quo consequuntur, exercitationem magni maxime saepe eius totam ad et non alias eum pariatur rem eaque odio aspernatur laudantium reprehenderit fugiat. Earum odit corporis quibusdam provident officiis esse voluptatum aliquam? Sapiente assumenda vel tempora omnis facilis laboriosam? Perspiciatis aspernatur delectus, alias in iste sed? Similique, debitis neque. Atque?

Backdrop

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.

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.