Offcanvas slides a panel from the edge of the viewport—ideal for mobile navigation, filters, or shopping carts. Structure: offcanvas offcanvas-start|end|top|bottom with offcanvas-header and offcanvas-body.
Triggers and backdrop
Open with data-bs-toggle="offcanvas" and data-bs-target, same contract as modals. The backdrop dismisses on outside click unless configured otherwise. On small screens, offcanvas often replaces a collapsed navbar’s link list.
Layout interaction
Unlike modals centered on screen, offcanvas shares the viewport with main content—ensure body scroll is managed and that focus moves into the panel when opened.
Self-check
- Which class slides the panel from the right edge?
- What two sections divide header actions from main content?
- When would you choose offcanvas over a modal?