● Patterns / CaseStudyNav
CaseStudyNav.
CaseStudyNav is the system's sequential navigation pattern. It closes a case study page and offers a direct path to the previous or next project in the series.
How the pattern behaves
CaseStudyNav appears at the bottom of each case study page, separated from the main content by a top border. It renders up to two navigation targets — one aligned left for the previous project, one aligned right for the next.
Each target shows a direction label and the linked project title. If a prev or next prop is omitted, that side is left empty. The strip itself is omitted entirely when neither prop is passed.
Source of truth
The component accepts optional prev and next props, each a { label: string; href: string } object. The ordering
of case studies is defined explicitly in each page, not derived from a central registry.
Pattern roles
CaseStudyNav is not general-purpose pagination. Its job is specific: close a linear reading experience and give readers a direct path to what comes next.
Sequential navigation
Lets readers move forward or backward through an ordered set of case studies without returning to the index first.
Editorial pacing
Marks the end of a page and offers a clear next action, reducing the drop-off that comes from reaching a hard stop.
Lightweight orientation
Previews what comes next by name, so the reader can decide whether to continue rather than navigate blind.
Anatomy
The pattern is a two-column strip. The left column holds the previous link; the right holds the next. Each is a stacked label + title block.
Both links
Next only
Prev only
Direction label
A muted "← Previous" or "Next →" label clarifies direction without requiring the reader to infer from position.
Project title
The linked page title gives enough context to decide whether to continue. It uses the same tracking and weight as body headings.
Hover state
Both the label and title shift to the primary accent color on hover, making the full block feel like a single clickable target.
Conditional rendering
The first case study renders only a next link; the last renders only a previous link. The component omits the strip entirely if neither prop is passed.
Guidelines
- Use CaseStudyNav at the bottom of case study pages to close the reading experience with a clear next action.
- Pass only the props that apply — prev for pages that have a predecessor, next for those with a successor.
- Keep label values short and consistent with the titles used in ProjectCard and breadcrumb trails.
- Do not use CaseStudyNav inside the system docs or any page that is not part of a linear content sequence.
- Maintain the project order across all three pages so the prev/next relationship stays consistent.
In practice
Is this page part of an ordered sequence?
If not, CaseStudyNav is the wrong pattern. Use Breadcrumb for hierarchy instead.
Does the label match the page title?
It should. Inconsistent labels create orientation errors.
Is the first page passing a prev prop?
It should not. Omit prev on the first item in the sequence.
Is the last page passing a next prop?
It should not. Omit next on the last item in the sequence.