Side Navigation

Live Demo

How it fits the navigation flow

L4 page (current branch only)

An L4 page (Secure lifetime retirement income) inside Pension solutions → Why join → What members get. The side nav lists only the L4 pages beneath What members get. Below 992 px it collapses behind a prominent “In this section” disclosure toggle.

L3 page (its L4 children)

States

Link interaction states per the Interaction States foundation. Hover and focus are shown statically via .is-* mirrors of the live :hover / :focus-visible rules; the current L4 page is carried by aria-current="page" (weight + rail + tint — never colour alone).

1. Summary

The Side Navigation orients users within the current L3 branch by listing only its visible L4 children. It appears on an L3 page when that page has L4 children and persists on those L4 pages. It does not repeat L2 or L3 destinations; users move to those levels through the mega navigation or breadcrumb.

2. Design Tokens

3. Authoring Fields

Not authored per page — the component derives its content from the current L3 page or, on an L4 page, its L3 parent. The only authorable options:

4. Validation Rules

5. Content Guidance

• Labels are page titles (or their short navigation titles) — never rewritten copy.
• Keep L4 lists scannable: prefer 4–8 items; if a branch needs substantially more, review the IA.
• The current L3 label provides context as a heading, not a link. The breadcrumb provides the link back to that page.

6. Semantic HTML

<nav class="caat-side-nav caat-side-nav--sticky" aria-label="Section navigation">
  <!-- Mobile disclosure toggle (hidden on desktop; side-nav.js wires it) -->
  <button class="caat-side-nav__toggle" type="button"
          aria-expanded="false" aria-controls="sideNavBody">
    <span>In this section: What members get</span> <i class="bi bi-chevron-down" aria-hidden="true"></i>
  </button>
  <div class="caat-side-nav__body" id="sideNavBody">
  <h2 class="caat-side-nav__heading">What members get</h2> <!-- current L3 label, not a link -->
  <ul class="caat-side-nav__list">
    <li><a class="caat-side-nav__link" href="…">Value</a></li>
    <li><a class="caat-side-nav__link" href="…" aria-current="page">Secure lifetime retirement income</a></li>
    <li><a class="caat-side-nav__link" href="…">Early retirement options</a></li>
  </ul>
  </div>
</nav>

Place inside the page grid: col-lg-3 for the nav, col-lg-9 for content. Below 992 px the grid stacks the nav above the content (Responsive foundation). Each rendered instance must use a unique aria-controls / body id pair.

7. CSS Contract

All styles in /assets/css/components/side-nav.css.

8. Accessibility

9. SEO

Server-rendered crawlable links connect the sibling L4 pages within the current L3 branch. Higher-level internal links remain in the breadcrumb and global navigation.

10. Analytics

data-analytics-component="side-nav"
data-analytics-label="{link text}"     <!-- per link, kebab-case -->
data-analytics-level="4"

11. AEM Implementation Notes

• Resource type: caat/components/side-nav; include in an L3 page template when visible L4 children exist and on its L4 page template — not authorable into other parsys positions.
• Tree is computed from the current page path: use the current page when it is L3, otherwise ascend from the current L4 page to its L3 parent; list only that L3 page’s visible children.
• Navigation titles (jcr:title / nav title override) supply labels.
• Include the side-nav.js clientlib only on templates where the side nav can render; it adds the mobile disclosure behavior while preserving the expanded no-JS fallback.

12. Dialog Model

Minimal — content is tree-derived, not authored.

{
  "sticky":    { "sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox", "name": "./sticky", "text": "Stick below header on desktop", "checked": true },
  "hidePages": { "sling:resourceType": "granite/ui/components/coral/foundation/form/multifield", "name": "./hidePages", "fieldLabel": "Hide pages" }
}

13. QA Acceptance Checklist

• Renders on an L3 page only when it has visible L4 children, and on those L4 pages; absent elsewhere.
• Exactly one aria-current="page" on an L4 page; no L2 or L3 navigation links render.
• Only the current L3 branch’s L4 items appear in one flat list.
• Below 992 px: collapses behind the “In this section” toggle (unique aria-controls target, aria-expanded reflects state); without JS the nav renders expanded; sticky on desktop when enabled.
• Focus ring visible on every link; hover/current styles match Interaction States and never rely on colour alone.
• Flow verified: mega nav L3 link → L3 page shows only its L4 children → L4 page keeps the same flat list and marks the current page.
• Labels match page navigation titles; hidden pages excluded.

14. Definition of Done

• Tree derivation verified against the content architecture (current L3 branch’s visible L4 children only).
• Breadcrumb + side nav present together where the side nav is eligible; mega navigation unchanged.
• Mobile disclosure and no-JS expanded fallback verified at the responsive breakpoint.
• QA checklist passes on an L3 page with children, an L3 page without children, an L4 page, and a hidden-page case.