Offcanvas

Demo

Panel Anatomy

The rendered panel appearance. The live panels above are slid in by Bootstrap (fixed-position) on trigger; this static instance shows the panel header, title, close button, and body for the Figma export.

1. Summary

The Offcanvas component provides a slide-in panel that appears from any edge of the viewport. It is designed for supplementary content that does not warrant a full page load — such as section navigation, resource filters, notification banners, and cookie consent panels within the CAAT Pension Plan member experience.

• Component name: caat/components/offcanvas
• Status: New
• Variants: Start (left), End (right), Top, Bottom
• Dependencies: Bootstrap 5.3.3 Offcanvas, CAAT Button component
• Usage context: Member portal navigation, resource filtering, system notifications, privacy consent

2. Design Tokens

3. Authoring Fields

4. Validation Rules

5. Content Guidance

• Do use offcanvas for secondary content that supplements the main page — e.g., filters on a resource listing or contextual navigation in the member portal.
• Do keep the title concise and action-oriented (e.g., "Filter Resources", "Member Navigation").
• Do place the most important actions at the top of the body content so they are visible without scrolling.
• Don't use offcanvas for primary content that every member must see — use the main content area instead.
• Don't nest an offcanvas inside another offcanvas or inside a modal.
• Don't include complex multi-step forms; prefer linking to a dedicated form page.
• Tone: Friendly, clear, pension-literate. Align with the CAAT voice and tone guidelines.

6. Semantic HTML

<!-- Trigger -->
<button class="caat-button caat-button--primary"
        type="button"
        data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasExample"
        aria-controls="offcanvasExample">
  Open Panel
</button>

<!-- Offcanvas panel -->
<div class="offcanvas offcanvas-start caat-offcanvas"
     tabindex="-1"
     id="offcanvasExample"
     aria-labelledby="offcanvasExampleLabel">
  <div class="caat-offcanvas__header offcanvas-header">
    <h5 class="caat-offcanvas__title" id="offcanvasExampleLabel">Panel Title</h5>
    <button type="button"
            class="caat-offcanvas__close"
            data-bs-dismiss="offcanvas"
            aria-label="Close">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
  <div class="caat-offcanvas__body offcanvas-body">
    <!-- Body content -->
  </div>
</div>

7. CSS Contract

Width: Side panels (start/end) render at 320px. Top/bottom panels cap at max-height: 50vh.

8. Accessibility

• The trigger button must include aria-controls pointing to the offcanvas ID.
• The panel must have aria-labelledby referencing the title element's id.
• tabindex="-1" is set on the panel root so focus is managed by Bootstrap.
• When opened, focus moves into the panel. When closed, focus returns to the trigger button.
• The close button must have aria-label="Close".
• The Escape key must dismiss the panel (handled natively by Bootstrap).
• All interactive elements inside the body must be keyboard-accessible and have visible focus indicators using --caat-focus.
• Colour contrast for title text against white header exceeds WCAG 2.1 AA 4.5:1 ratio.

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Notes

• Resource type: caat/components/offcanvas
• Component group: CAAT — Overlays
• HTL template must emit the semantic HTML from Section 6. Placement class (.offcanvas-start, etc.) is resolved via Sling model from the Placement dialog field.
• The trigger button variant is driven by the Trigger Variant select field.
• A unique ID is auto-generated per component instance using ${component.id}.
• Body content renders via an Experience Fragment or inline rich-text parsys, depending on author preference.
• The offcanvas is compatible with AEM's responsive grid and should be placed outside the main content parsys to avoid stacking issues.

12. Dialog Model

Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).

{
  "title":          { "type": "textfield", "required": true, "maxLength": 60 },
  "placement":      { "type": "select", "options": ["start","end","top","bottom"], "default": "start" },
  "bodyContent":    { "type": "richtext", "required": true },
  "triggerLabel":   { "type": "textfield", "required": true },
  "triggerVariant": { "type": "select", "options": ["primary","secondary","outline-primary"], "default": "primary" },
  "triggerIcon":    { "type": "iconpicker", "required": false },
  "enableBackdrop": { "type": "checkbox", "default": true },
  "enableScroll":   { "type": "checkbox", "default": false }
}

13. QA Checklist

14. Definition of Done