Offcanvas

It is a panel that slides into view from an edge of the viewport (start/left, end/right, top, or bottom) to present secondary content or tasks without navigating away from the current page. It typically appears above a backdrop and can optionally lock page scrolling, behaving similarly to a lightweight “side dialog.”

• Header is visually distinct (optional divider/border-bottom).
• Close button is always visible and reachable.
• Backdrop opacity should be strong enough to signal modal context while preserving orientation.

Use Offcanvas when you need…

• Secondary navigation on smaller screens (e.g., mobile nav drawer).
• Filters / facets / sort controls for list and search pages (keeps results visible when dismissed).
• Contextual tools that support the current page (e.g., “Cart”, “Saved items”, “Settings”, “Table columns”, “Help/Details”).
• Responsive side panels that become persistent at larger breakpoints (Bootstrap’s responsive offcanvas pattern).

Don't use Offcanvas when…

• The user must complete a critical decision (confirm delete, destructive actions) → use a Modal.
• The content is tiny and quick (a few actions/links) → use a Dropdown/Popover.
• The panel must be always visible and part of the page layout (desktop app sidebar) → use a persistent sidebar layout, not an overlay.
• The flow is multi-step, long, or form-heavy and needs strong focus/attention → prefer a dedicated page (or a Modal only if short and contained).
• You need multiple panels open at once or nested panels → avoid; redesign (Offcanvas is best as a single active overlay).

User interactions:

• Open: via explicit trigger (button/link). Trigger should include aria-controls="offcanvasId".
• Close:
  • Close button (required)
  • Esc key (unless there is a strong reason to disable)
  • Backdrop click (when backdrop enabled)
• Focus management:
  • Focus moves into the offcanvas on open
  • Focus is trapped while open (modal behavior)
  • Focus returns to the triggering control on close

Do not open an Offcanvas automatically on page load (surprising + accessibility concerns).

Scroll behavior

• Default: page scroll locked, offcanvas body scrolls.
• Only allow background scrolling (data-bs-scroll="true") when the offcanvas is non-modal (often paired with data-bs-backdrop="false"). Use this sparingly because it reduces focus and clarity.

Responsive behavior (recommended pattern for nav/side tools)

Use Bootstrap's responsive offcanvas classes (e.g., .offcanvas-lg) so the panel:

• behaves as an overlay below the breakpoint
• becomes static/persistent above the breakpoint (in common navbar patterns)

• Offcanvas container must have:
  • tabindex="-1"
  • aria-labelledby="titleId" (preferred) or aria-label="…"
• Title element id must match aria-labelledby
• Close button must have aria-label="Close"
• Ensure visible focus states meet WCAG 2.1 AA and color contrast meets AA

• Offcanvas in Bootstrap