Offcanvas

Offcanvas is a user interface pattern in which a panel or content region is positioned outside the main viewport and revealed by user action, typically through a button or gesture. It is commonly used for navigation menus, settings, search, or shopping carts on mobile and responsive sites.

In practice, offcanvas patterns include several variants. An overlay or sliding offcanvas slides in from the side and overlaps the main content, while a push variant moves the main content aside to make room for the panel. Some implementations keep the panel permanently visible on larger screens, effectively combining with a traditional sidebar. Most commonly, the panel appears from the left or right, but bottom sheets or top panels are also used for specific interactions. Offcanvas is distinct from modal dialogs in that it is usually less disruptive and may allow interaction with parts of the background content while open.

Accessibility considerations are essential. Implementations should manage focus when the panel opens and closes, trap focus within the panel if appropriate, provide clear labels and ARIA attributes, support closing via the Escape key, and respect reduced motion preferences. The hidden content should be accessible to assistive technologies when the offcanvas is opened.

Frameworks and design systems often provide dedicated offcanvas components, such as in Bootstrap or Material Design-inspired libraries. Designers choose between overlay or push behavior and tailor responsiveness to ensure usable navigation and interactions across devices. See also: drawers, sidebars, and responsive navigation patterns.