Navigation

Live Demo

Desktop Mega Menu Navbar

Footer

Mobile Menu

Rendered

Menu

• Pension solutions
• Members
• Employers
• Investments
• About us

Support Centre Newsroom Events Careers

Login

• Member portal
• Employer Portal

English

Back Pension solutions

• Why join
• How to join
• Tools & resources

Back Why join

• What members get
• What employers get
• Flexibility
• Success stories

Back What members get

• Value
• Secure lifetime retirement income
• Early retirement options
• Survivor benefits
• Inflation adjustments
• Portability

Back What employers get

• How much does DBplus cost?
• Support from CAAT
• Employer responsibilities

Back Success stories

• OTIP
• Digital Research Alliance of Canada
• St. John Ambulance
• The City of Whitehorse
• Klos Concepts
• United Way
• Canadian Coalition for Good Governance
• Torstar
• Sanofi
• Postmedia
• The George Hull Centre for Children and Families
• Ontario One Call

Back How to join

• From no pension plan
• From a group RRSP
• From a DC plan
• From a DB plan

Back Tools & resources

• DBplus Value Tool
• DBplus video library

Back Members

• Your pension
• Plan your retirement
• Life events
• Resources

Back Your pension

• Welcome to the CAAT Plan
• Enrolment made easy
• Your contributions
• Increase your pension
• Your statements

Back Increase your pension

• DBprime purchases
• DBplus purchases

Back Your statements

• Active member statements
• Retired member statements

Back Plan your retirement

• Retirement options
• Estimate your pension
• Inflation protection
• GROWTHplus

Back Retirement options

• Attend a member presentation
• Retirement planning on demand
• I'm ready to retire

Back Estimate your pension

• DBprime Estimator
• DBplus Estimator
• DBplus Employer Pension Estimator
• DBplus Employer Pension Purchase Tool
• DBplus Evaluation Tool
• DBplus Estimator since 2019
• DBplus Pension Purchase Tool
• Actuarial Cost Estimator

Back GROWTHplus

• Modeller

Back Life events

• Collecting your pension
• Survivor benefits
• Disability and your pension
• Separation or divorce
• Leaving your job
• Starting a deferred pension

Back Survivor benefits

• Claim a survivor benefit

Back Resources

• Member resources
• Member glossary
• Planner (member blog)
• Member news
• CAAT RCA
• About your merged plan

Back Member resources

• Jurisdictional differences

Back About your merged plan

• Alberta Milk
• Angus Consulting Management Limited
• Catholic Charities of the Archdiocese of Toronto and Agencies
• Community Living Toronto
• Jewish Vocational Services (JVS) - Toronto
• Lutheran Church – Canada (LCC) Pension Plan
• MC LegalManagement Limited Partnership
• Pension Plan for Employees of Healthcare Excellence Canada (HEC)
• Pension Plan for Employees of The College of Family Physicians of Canada
• Postmedia Network Inc
• Royal Ontario Museum (ROM)
• Sanofi Pasteur
• St. John Ambulance
• The Canadian Press
• The George Hull Centre for Children and Families
• The Globe and Mail
• The Manitoba Teachers’ Society
• Torstar Group of Companies
• United Way of Greater Toronto
• Winnipeg Free Press and Canstar Community News
• Youth Services Bureau (YSB)

Back Employers

• Administer the plan
• Education & support
• Tools & resources

Back Administer the plan

• Employer responsibilities
• Service standards
• Rates at a glance
• S-Doc How-to Guide

Back Education & support

• Employer education
• Employer update sessions
• Employer Q&A Corner

Back Employer education

• Contributions
• Data reporting
• Employee enrolment
• Publications & resources

Back Tools & resources

• PA Calculator
• Recruitment Toolkit
• Employer resources
• Employer News
• GROWTHplus

Back Investments

• Approach
• Responsible investing
• Corporate engagement
• Performance

Back About us

• CAAT's promise
• Participating employers
• Annual performance
• Leadership and Governance
• Legislation and Compliance
• Member policies
• Contact us

Nav Link States

L1 navigation link interaction states. Hover and focus are shown statically via is-* classes mirroring the live :hover / :focus rules; the current-page state uses .active.

Code samples

<header class="caat-navbar" data-analytics-component="navigation">
  <div class="utility-bar">
    <div class="container d-flex justify-content-end gap-3">
      <a href="/contact">Contact us</a>
      <a href="#" class="lang-switch" aria-label="Switch language to French" lang="fr" hreflang="fr">Français</a>
    </div>
  </div>
  <nav class="navbar navbar-expand navbar-main" aria-label="Main navigation">
    <div class="container">
      <a class="navbar-brand" href="/">
        <img src="/assets/images/CAAT_RGB.png" alt="CAAT Pension Plan">
      </a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <div class="nav-link-group">
              <a class="nav-link" href="/pension-solutions">Pension solutions</a>
              <button class="nav-link nav-link-toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open Pension solutions menu"></button>
            </div>
            <div class="dropdown-menu mega-menu">
              <div class="container">
                <div class="mega-columns">
                  <div>
                    <!-- L2: clickable column header -->
                    <a class="mega-category-title" href="/pension-solutions/plans">
                      <i class="bi bi-shield-check"></i> Our Plans
                    </a>
                    <!-- L3: plain links — labels only, no descriptions, never L4 -->
                    <ul class="mega-links">
                      <li><a href="#">DBplus</a></li>
                      <li><a href="#">DBprime</a></li>
                    </ul>
                  </div>
                  <div class="mega-promo">
                    <p class="mega-promo-title">Ready to join?</p>
                    <p class="mega-promo-text">Learn more...</p>
                    <a href="#" class="btn btn-sm btn-primary">Get started</a>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about">About us</a>
          </li>
        </ul>
        <div class="nav-actions">
          <div class="nav-search-wrap">
            <input type="search" class="nav-search-input"
                   placeholder="Search CAAT" aria-label="Search">
            <i class="bi bi-search"></i>
          </div>
          <div class="caat-dropdown dropdown">
            <button class="nav-login dropdown-toggle" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false">
              <i class="bi bi-person-circle" aria-hidden="true"></i> Login
            </button>
            <ul class="dropdown-menu dropdown-menu-end caat-dropdown__menu">
              <li><a class="dropdown-item caat-dropdown__item" href="/member-portal">Member portal</a></li>
              <li><a class="dropdown-item caat-dropdown__item" href="/employer-portal">Employer Portal</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>

Mobile drill-down — live demo

Scotiabank-style panel drill-down: tap a parent to slide into its child panel (down to Level 4), Back returns one level, each panel offers a section-overview link. Try it:

Open mobile menu

<div class="caat-mobile-nav-demo">
  <div class="caat-mobile-topbar">
    <a href="/">
      <img src="/assets/images/caat-logo.jpg" alt="CAAT Pension Plan">
    </a>
    <button class="caat-menu-button" type="button"
            aria-expanded="false" aria-controls="mobileOffcanvas"
            aria-label="Open menu">
      <i class="bi bi-list" aria-hidden="true"></i> Menu
    </button>
  </div>
  <div class="offcanvas offcanvas-end" id="mobileOffcanvas"
       tabindex="-1" aria-labelledby="mobileOffcanvasLabel">
    <div class="offcanvas-header">
      <h5 id="mobileOffcanvasLabel">Menu</h5>
      <button type="button" class="btn-close"
              data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body caat-drillnav" data-caat-drillnav>
      <div class="caat-mobile-search">
        <input type="search" class="form-control"
               placeholder="Search CAAT" aria-label="Search CAAT">
        <i class="bi bi-search" aria-hidden="true"></i>
      </div>

      <!-- ROOT panel: L1 — items with children use a drill trigger -->
      <div class="caat-drillnav__panel">
        <ul class="caat-drillnav__list">
          <li>
            <button class="caat-drillnav__next" type="button"
                    data-target="dn-pension" aria-expanded="false">
              Pension solutions <i class="bi bi-chevron-right" aria-hidden="true"></i>
            </button>
          </li>
          <li><a class="caat-drillnav__link" href="/about">About CAAT</a></li>
        </ul>
      </div>

      <!-- L2 panel — Back + section overview link + children -->
      <div class="caat-drillnav__panel" id="dn-pension">
        <button class="caat-drillnav__back" type="button">
          <i class="bi bi-chevron-left" aria-hidden="true"></i> Back
        </button>
        <a class="caat-drillnav__overview" href="/pension-solutions">Pension solutions</a>
        <ul class="caat-drillnav__list">
          <li>
            <button class="caat-drillnav__next" type="button"
                    data-target="dn-dbplus" aria-expanded="false">
              DBplus <i class="bi bi-chevron-right" aria-hidden="true"></i>
            </button>
          </li>
          <li><a class="caat-drillnav__link" href="…">Why CAAT</a></li>
        </ul>
      </div>

      <!-- L3 panel — its links are L4 pages (deepest level) -->
      <div class="caat-drillnav__panel" id="dn-dbplus">
        <button class="caat-drillnav__back" type="button">
          <i class="bi bi-chevron-left" aria-hidden="true"></i> Back
        </button>
        <a class="caat-drillnav__overview" href="…">DBplus</a>
        <ul class="caat-drillnav__list">
          <li><a class="caat-drillnav__link" href="…">How DBplus works</a></li>
          <li><a class="caat-drillnav__link" href="…" aria-current="page">Contribution rates</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Navigation Model (L1–L4)

The site IA runs four levels deep. Each level is served by a fixed set of navigation surfaces — no surface ever shows deeper than its mandate:

• Mega nav is available on every page, holds up to 4 columns, and stops at L3.
• Breadcrumb appears on every L2+ page (see the Breadcrumb contract).
• Side Navigation appears on L3 pages with visible L4 children and on those L4 pages (see the Side Navigation contract). It lists only the current L3 branch’s L4 pages.
• Mobile drill-down mirrors the full tree to L4 with a Back control per panel (live demo above).
• The IA stops at L4 — pages deeper than L4 are a content-architecture error.

Reference site map (derived from caatpension.ca)

Restructured from the live caatpension.ca sitemap (June 2026) to fit the four-level model. Pension solutions was regrouped from seven flat L2s into three; pages deeper than L4 on the live site (e.g. Actuarial Cost Estimator help steps) fold into their L4 parent as in-page content.

L1 Pension solutions
├─ L2 Why join → L3 What members get (→ L4 Value · Secure lifetime income · Early retirement
│        options · Survivor benefits · Inflation adjustments · Portability) · What employers get
│        (→ L4 How much does DBplus cost? · Support from CAAT · Employer responsibilities [cross-link]) · Flexibility ·
│        Success stories (→ L4: 12 case-study pages)
├─ L2 How to join → L3 From no pension plan · From a group RRSP · From a DC plan · From a DB plan
└─ L2 Tools & resources → L3 DBplus Value Tool · DBplus video library

L1 Members
├─ L2 Your pension → L3 Welcome · Enrolment · Contributions · Increase your pension
│        (→ L4 DBprime / DBplus purchases) · Your statements (→ L4 Active / Retired
│        member statements — flat L2s on the live site, grouped here)
├─ L2 Plan your retirement → L3 Retirement options (→ L4 Attend a presentation · Planning
│        on demand · I'm ready to retire) · Estimate your pension (→ L4: all 8 estimator
│        tools incl. Actuarial Cost Estimator) · Inflation protection ·
│        GROWTHplus (→ L4 Modeller; "Modeller help" is L5 → folds in)
├─ L2 Life events → L3 Collecting your pension · Survivor benefits (→ L4 Claim) · Disability ·
│        Separation or divorce · Leaving your job · Starting a deferred pension
└─ L2 Resources → L3 Member resources (→ L4 Jurisdictional differences) · Glossary ·
         Planner · Member news · CAAT RCA · About your merged plan (→ L4: 21 merged-plan pages)

L1 Employers
├─ L2 Administer the plan → L3 Responsibilities · Service standards · Rates · S-Doc Guide
├─ L2 Education & support → L3 Employer education (→ L4 Contributions · Data reporting ·
│        Enrolment · Publications) · Update sessions · Q&A Corner
└─ L2 Tools & resources → L3 PA Calculator · Recruitment Toolkit · Resources · News · GROWTHplus

L1 Investments → L2 Approach · Responsible investing · Corporate engagement · Performance
L1 About us    → L2 CAAT's promise · Participating employers · Annual performance ·
                  Leadership and Governance · Legislation and Compliance · Member policies · Contact us

Utility bar: Support Centre · Newsroom · Events · Careers · EN|FR     Actions: Search · Login (Member portal · Employer Portal)
Footer/legal: People · Privacy · Terms of use · Accessibility · Sitemap

Label shortening: long page titles take a short navigation title in menus ("Joining from no pension plan" → From no pension plan; "Increasing your pension with a purchase" → Increase your pension) — full titles stay on pages and breadcrumbs (30-char cap). Folding: live-site L5s (Actuarial Cost Estimator help steps, GROWTHplus Modeller help) fold into their L4 parent.

Investments and About us are shallow (two levels), so they render as plain L1 links. Their L2 pages are reached through the global navigation and breadcrumb; no side navigation renders without L4 items.

1. Component Summary

Primary use cases

1. Site header — desktop navbar with utility bar, 25% larger logo, mega-menu dropdowns (up to 4 columns, depth to L3), search, and a Login dropdown for the member and employer portals
2. Mega menu panels — full-width dropdowns with categorised columns, nested links, optional promo cards, and L2-first keyboard tab order
3. Site footer — link columns, legal links, social icons, and copyright
4. Mobile navigation — offcanvas drill-down menu: one panel per level, forward to L4, Back returns a level (navigation.js)
5. Utility navigation — secondary links (Contact, Support, Newsroom, Events, Careers)
6. Language toggle — English / Français switcher with proper lang attribute

Non-goals

1. Not for in-page section navigation (use Table of Contents component instead)
2. Not for breadcrumbs (separate Breadcrumb component)
3. Does not manage client-side routing or SPA behaviour

2. Design System Source / Token Dependencies

Visual variants

• Desktop header — full-width navbar with dark utility bar, enlarged logo, mega-menu dropdown items (L1–L3), search pill, and a Login dropdown linking to both portals
• Mega menu panel — full-width dropdown with up to 4 categorised columns containing L2 headings and L3 links, plus an optional promotional card
• Mobile header — compact topbar with logo and hamburger toggle, offcanvas drill-down panels (to L4, with Back)
• Full footer — 4-column link grid with legal row, social icons, copyright
• Campaign footer — simplified single-row footer for landing pages (legal links + copyright only)

3. Authoring Fields

Header tab

Footer tab

Mobile tab

4. Authoring Validation Rules

1. Logo image is required for both header and footer. The dialog must not allow saving without it.
2. Primary nav links must contain at least 3 items. Display a validation error if fewer are provided.
3. Footer legal links must include entries for Privacy, Terms of use, and Accessibility. Warn if any are missing.
4. Copyright text is required. The dialog must not allow saving without it.
5. Social links must each have a valid URL and an aria-label generated from the selected platform name.
6. Both portal URLs are required so the Login dropdown always contains “Member portal” and “Employer Portal”.
7. Primary nav link labels should not exceed 25 characters each. Display a warning above 20 characters.
8. Mega menu columns: a menu may contain at most 4 link groups (columns). The dialog rejects a 5th group.
9. Mega menu depth: entries go no deeper than Level 3 (column header = clickable L2 link, list links = L3 labels only — no descriptions). L4 pages never appear in the mega menu — they are reached via the Side Navigation, breadcrumb, and the mobile drill-down.
10. Mega menu keyboard order: inside each open desktop panel, Tab reaches every clickable L2 column header first, then continues through L3 links and promo links.
11. Mobile drill-down depth: panels mirror the full tree to Level 4; every drilled panel must include the Back control and a section-overview link.

5. Content Guidance

Interaction expectations

• On desktop, hovering a mega-menu L1 item opens its panel after a short intent delay.
• The L1 text remains a normal link to the section landing page. Hover must not prevent click navigation.
• The adjacent caret button toggles the same panel for pointer and keyboard users and mirrors state with aria-expanded.
• Only one mega panel may be open at a time. Moving to another L1 opens that panel and closes the previous panel.
• Hover-open is desktop-only. Tablet and mobile use the offcanvas drill-down menu.

6. Expected Semantic HTML Output

Header — Bootstrap navbar with mega menu

<header class="caat-navbar">
  <!-- Utility bar -->
  <div class="utility-bar">
    <div class="container d-flex justify-content-end gap-3">
      <a href="#">Contact us</a>
      <a href="#" class="lang-switch" aria-label="Switch language to French" lang="fr" hreflang="fr">Français</a>
    </div>
  </div>
  <!-- Main navbar -->
  <nav class="navbar navbar-expand navbar-main" aria-label="Main navigation">
    <div class="container">
      <a class="navbar-brand" href="/">
        <img src="/logo.png" alt="CAAT Pension Plan">
      </a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <div class="nav-link-group">
              <a class="nav-link" href="/pension-solutions">Pension solutions</a>
              <button class="nav-link nav-link-toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open Pension solutions menu"></button>
            </div>
            <div class="dropdown-menu mega-menu">
              <div class="container">
                <div class="mega-columns">
                  <div>
                    <a class="mega-category-title" href="…">Our Plans</a>  <!-- L2, clickable -->
                    <ul class="mega-links">                                 <!-- L3, labels only -->
                      <li><a href="#">DBplus</a></li>
                    </ul>
                  </div>
                  <div class="mega-promo">…</div>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        </ul>
        <div class="nav-actions">
          <div class="nav-search-wrap">
            <input type="search" class="nav-search-input">
            <i class="bi bi-search"></i>
          </div>
          <div class="caat-dropdown dropdown">
            <button class="nav-login dropdown-toggle" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false">Login</button>
            <ul class="dropdown-menu dropdown-menu-end caat-dropdown__menu">
              <li><a class="dropdown-item caat-dropdown__item" href="/member-portal">Member portal</a></li>
              <li><a class="dropdown-item caat-dropdown__item" href="/employer-portal">Employer Portal</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>

Navigation hierarchy (IA is 4 levels; the mega menu shows L1–L3)

Footer — semantic <footer> with <nav>

<footer class="caat-footer" role="contentinfo">
  <div class="container">
    <div class="caat-footer__grid">
      <nav class="caat-footer__col" aria-labelledby="ft-quick">
        <h2 class="caat-footer__heading" id="ft-quick">Quick links</h2>
        <ul class="caat-footer__list">…</ul>
      </nav>
    </div>
    <div class="caat-footer__bottom">…</div>
  </div>
</footer>

Full contract on the Footer page.

Mobile menu — offcanvas with ARIA

<button class="caat-menu-button" type="button"
        data-bs-toggle="offcanvas" data-bs-target="#mobileOffcanvas"
        aria-expanded="false" aria-controls="mobileOffcanvas"
        aria-label="Open menu">
  <i class="bi bi-list" aria-hidden="true"></i> Menu
</button>

<div class="offcanvas offcanvas-end" id="mobileOffcanvas"
     tabindex="-1" aria-labelledby="mobileOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 id="mobileOffcanvasLabel">Menu</h5>
    <button type="button" class="btn-close"
            data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body caat-drillnav" data-caat-drillnav>
    <div class="caat-drillnav__panel">…</div>   <!-- root + one panel per node, see §6 -->
  </div>
</div>

7. CSS Contract

The navigation component relies on the global token layer defined in /assets/css/tokens.css. All component-specific styles live in /assets/css/components/navigation.css.

Primary selectors

8. Accessibility Requirements

Behaviour contract

Bootstrap 5 handles offcanvas lifecycle and the Login dropdown. navigation.js handles the split-link desktop mega menus, mobile drill-down panels, and desktop mega-menu tab order. Verify the behaviours below survive any AEM integration.

9. SEO Requirements

1. All navigation links must be rendered as crawlable <a> elements with valid href attributes. No JavaScript-only navigation.
2. Link text must be descriptive and unique within the page. Avoid generic phrases like "Click here".
3. Maintain a canonical navigation structure — the same primary links should appear on all pages for consistent internal linking.
4. Footer links contribute to the site's internal link graph. Ensure all footer URLs resolve correctly (no broken links).
5. The logo link should point to the site root (/) to reinforce the homepage's authority.

10. Analytics Requirements

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 Implementation Notes

Existing component mapping

This component replaces Header (#39) and Footer (#37) in the existing AEM component library.

AEM triage

Rebuild Rebuild to new brand standards. The existing header and footer components do not meet current accessibility, design-token, or responsive requirements.

Experience Fragment approach

Implement the header and footer as AEM Experience Fragments. Each fragment is authored once and referenced globally via template policies, ensuring consistent navigation across all pages without per-page authoring.

• Header XF: contains the desktop mega-menu navbar (Bootstrap 5.3 navbar-expand with .dropdown-menu.mega-menu panels). Mobile nav uses Bootstrap offcanvas + the drill-down panels; navigation.js also normalizes desktop mega-menu tab order.
• Footer XF: contains the full footer; campaign pages may reference a simplified campaign-footer XF variant.

Client library structure

• Category: caat.components.navigation
• Dependencies: caat.base (tokens + base styles), caat.components.button, and caat.components.dropdown for the portal Login control
• CSS: navigation.css
• JS: navigation.js (Bootstrap 5.3 bundle handles dropdown/offcanvas show-hide natively; navigation.js normalizes desktop mega-menu tab order and implements the mobile drill-down — panel stack, Back, focus management, reset on close)

Suggested file structure

experience-fragments/
├── header/
│   ├── master/
│   │   ├── _cq_dialog/
│   │   │   └── .content.xml        # Header XF dialog
│   │   ├── .content.xml             # XF node definition
│   │   └── header.html              # HTL template
│   └── variations/
│       └── campaign-header/
│           └── .content.xml
├── footer/
│   ├── master/
│   │   ├── _cq_dialog/
│   │   │   └── .content.xml        # Footer XF dialog
│   │   ├── .content.xml
│   │   └── footer.html
│   └── variations/
│       └── campaign-footer/
│           └── .content.xml
└── clientlibs/
    ├── .content.xml
    ├── css/
    │   └── navigation.css
    └── js/
        └── navigation.js

12. Dialog Field 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).

# caat/experience-fragments/header — Touch UI Dialog
# _cq_dialog/.content.xml (YAML representation)

dialog:
  jcr:primaryType: nt:unstructured
  sling:resourceType: cq/gui/components/authoring/dialog
  content:
    jcr:primaryType: nt:unstructured
    sling:resourceType: granite/ui/components/coral/foundation/container
    items:
      tabs:
        jcr:primaryType: nt:unstructured
        sling:resourceType: granite/ui/components/coral/foundation/tabs
        items:

          # ── Header tab ───────────────────────────────
          header:
            jcr:title: Header
            items:
              logoImage:
                sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                name: ./logoImage
                fieldLabel: Logo image
                required: true
                rootPath: /content/dam
              primaryNavLinks:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./primaryNavLinks
                fieldLabel: Primary nav links
                required: true
                composite: true
                items:
                  label:
                    sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                    name: ./label
                    fieldLabel: Label
                    required: true
                    maxlength: 25
                  url:
                    sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                    name: ./url
                    fieldLabel: URL
                    required: true
              utilityNavLinks:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./utilityNavLinks
                fieldLabel: Utility nav links
                composite: true
                items:
                  label:
                    sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                    name: ./label
                    fieldLabel: Label
                  url:
                    sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                    name: ./url
                    fieldLabel: URL
              searchEnabled:
                sling:resourceType: granite/ui/components/coral/foundation/form/switch
                name: ./searchEnabled
                fieldLabel: Search enabled
                checked: true
              memberPortalURL:
                sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                name: ./memberPortalURL
                fieldLabel: Member portal URL
                required: true
              employerPortalURL:
                sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                name: ./employerPortalURL
                fieldLabel: Employer Portal URL
                required: true
              languageToggleURLs:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./languageToggleURLs
                fieldLabel: Language toggle URLs
                composite: true
                items:
                  langCode:
                    sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                    name: ./langCode
                    fieldLabel: Language code
                  url:
                    sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                    name: ./url
                    fieldLabel: URL

          # ── Mobile tab ───────────────────────────────
          mobile:
            jcr:title: Mobile
            items:
              offcanvasPosition:
                sling:resourceType: granite/ui/components/coral/foundation/form/select
                name: ./offcanvasPosition
                fieldLabel: Offcanvas position
                items:
                  - { text: End (right), value: end }
                  - { text: Start (left), value: start }

---

# caat/experience-fragments/footer — Touch UI Dialog
# _cq_dialog/.content.xml (YAML representation)

dialog:
  jcr:primaryType: nt:unstructured
  sling:resourceType: cq/gui/components/authoring/dialog
  content:
    jcr:primaryType: nt:unstructured
    sling:resourceType: granite/ui/components/coral/foundation/container
    items:
      tabs:
        jcr:primaryType: nt:unstructured
        sling:resourceType: granite/ui/components/coral/foundation/tabs
        items:

          # ── Footer tab ──────────────────────────────
          footer:
            jcr:title: Footer
            items:
              linkColumns:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./linkColumns
                fieldLabel: Link columns
                required: true
                composite: true
                items:
                  heading:
                    sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                    name: ./heading
                    fieldLabel: Column heading
                    required: true
                  links:
                    sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                    name: ./links
                    fieldLabel: Links
                    composite: true
                    items:
                      label:
                        sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                        name: ./label
                        fieldLabel: Label
                      url:
                        sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                        name: ./url
                        fieldLabel: URL
              legalLinks:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./legalLinks
                fieldLabel: Legal links
                required: true
                composite: true
                items:
                  label:
                    sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                    name: ./label
                    fieldLabel: Label
                    required: true
                  url:
                    sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                    name: ./url
                    fieldLabel: URL
                    required: true
              socialLinks:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./socialLinks
                fieldLabel: Social links
                composite: true
                items:
                  platform:
                    sling:resourceType: granite/ui/components/coral/foundation/form/select
                    name: ./platform
                    fieldLabel: Platform
                    items:
                      - { text: LinkedIn, value: linkedin }
                      - { text: YouTube, value: youtube }
                      - { text: Twitter / X, value: twitter }
                      - { text: Facebook, value: facebook }
                      - { text: Instagram, value: instagram }
                  url:
                    sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                    name: ./url
                    fieldLabel: URL
              footerLogo:
                sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
                name: ./footerLogo
                fieldLabel: Logo image
                required: true
                rootPath: /content/dam
              copyrightText:
                sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                name: ./copyrightText
                fieldLabel: Copyright text
                required: true

13. QA Acceptance Checklist

• Desktop navbar renders correctly: dark right-aligned utility bar, enlarged logo, split L1 navigation links, search pill, Login dropdown, and language toggle are visible and properly aligned; no Join DBplus button renders.
• Login uses the Dropdown component and contains exactly two links: “Member portal” and “Employer Portal”.
• Desktop mega menu panels open on L1 hover and on caret click/keyboard activation. The L1 text link remains clickable and navigates to its landing page.
• Mega menu panels display categorised columns (L2 headings and L3 links only) and an optional promo card.
• Mega menu closes on pointer leave, outside click, Escape key, or opening another L1 item. Only one panel is open at a time.
• Mobile menu opens via hamburger toggle; the search field appears at the top of the drawer; drill-down panels reach L4 with a working Back control, focus moves into each revealed panel, and the menu resets to root on close.
• Full footer renders all 4 link columns, legal links (including Privacy, Terms of use, Accessibility), social icons, logo, and copyright.
• Responsive behaviour: navbar wraps gracefully at tablet and mobile breakpoints; footer collapses to 2-column and then 1-column; mobile nav is hidden on desktop.
• Keyboard navigation works: all links and buttons reachable via Tab; desktop mega menu focus moves across L2 category links before L3 links; offcanvas closes with Escape; focus is trapped inside offcanvas when open.
• All links resolve correctly — no broken links in header, footer, or mobile menu. External links open in new tab with rel="noopener".
• Legal compliance: Privacy, Terms of use, and Accessibility links are present in the footer on all page templates including campaign pages.
• Language toggle switches to the correct locale URL and uses the lang attribute on the toggle element.

14. Definition of Done