Offcanvas

Offcanvas

Offcanvas panels slide from an edge of the viewport and are useful for mobile navigation, filters, and secondary controls.

Core concept

Explain offcanvas structure, placement classes, backdrop behavior, scrolling, responsive offcanvas options, toggle attributes, and close controls.

Using it in a real interface

Build a mobile filter drawer for an e-commerce listing. Explain how the drawer keeps filters accessible without permanently consuming screen width.

Implementation notes

Always provide a clear close mechanism and test keyboard focus. A panel that visually opens but traps or loses focus creates a poor interaction for keyboard users.