Step navigation

Use step navigation when multi-step flows should show progress and the current step.

AEM publisher guidelines

View the component in Figma

Live demo

Visitors scan a horizontal strip of steps; the current step is easy to spot so they know what is done and what comes next. Content authors order the steps and set short labels or titles for each link. If the list is empty, nothing appears on the published page (authors see a placeholder while editing).

Anatomy

  1. Outer wrapper: div.c-step-navigation__container with role="navigation" and aria-label="Step navigation", plus optional additionalClass.
  2. Per step: div.c-step-navigation__step with optional modifiers c-step-navigation__step--active (current page) and c-step-navigation__step--before-active (step immediately before the current one in the list, used for triangle styling).
  3. Link: a.c-step-navigation__link containing c-step-navigation__link-block (optional c-step-navigation__link--label span, then c-step-navigation__link--title) and c-step-navigation__triangle.

Content

Field Tab Purpose
Links Links Multifield of simple link items: label (optional), title, path. Empty {} entries are skipped.
CSS class Advanced settings Optional additionalClass on the container.

Instances in the codebase

Location Notes
apps/concordia/components/step-navigation/step-navigation.jsp Sole rendering script for this component.

When to use

  • Multi-step flows where users should see where they are in a fixed sequence (apply, register, wizard-style subsites).
  • When each step is a separate page with a stable URL (not in-page tabs).

When not to use

  • In-page section jumps; use Anchor navigation for same-page targets.
  • Parallel sections without order; use Secondary navigation or primary nav patterns.

Guidelines

Do

  • Keep labels and titles short so the strip does not wrap awkwardly on small screens.
  • Ensure link paths match real published pages in the workflow.

Don't

  • Don't rely on step order for security; this is wayfinding only.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/step-navigation/step-navigation.jsp']
Item Location
Component script apps/concordia/components/step-navigation/step-navigation.jsp
Dialog apps/concordia/components/step-navigation/dialog.xml

Markup pattern: c-step-navigation__container → repeated c-step-navigation__step → c-step-navigation__link with aria-current on the active step.

Path logic: Current page detection compares currentPage.getPath() to each linkPath without .html. Internal content links may have .html appended automatically.