Data Display
Horizontal Status Pipeline
A Horizontal Status Pipeline visually represents the stages of a process in a sequential flow, helping users track progress, understand their current position and identify completed, active, or upcoming steps within a journey.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax
- Each step has an aria-label describing its name and state
- Active step is marked with aria-current="step"
- Trail connectors are decorative and hidden from assistive technology with aria-hidden="true"
- Color alone is never the only indicator, shape (checkmark/dot/number) also conveys state
When to use this component
✓Do's
- •Showing multi-stage application or service request progress
- •Tracking sequential government workflows (e.g. Aadhaar, PAN, passport)
- •Providing users with at-a-glance status of where they are in a process
✗Don'ts
- •Showing non-sequential or branching processes, use a flowchart
- •Tracking time or quantity, use a Progress Bar instead
- •More than 7 steps, use a condensed timeline view for longer flows
Do's and Don'ts
✓ Do's
3
4
Received
Reviewing
Approved
Issued
Use green for completed steps and purple for the current step. Include meaningful stage labels so users understand where they are in the process.
✗ Don'ts
1
2
3
4
5
6
7
8
Don't use 8 or more steps without condensing. Long pipelines cause cognitive overload and make it hard to identify the current stage at a glance.