Skip to main content
Our new developer certification is live!

ChapterPagination

Navigation component for guide chapters that displays previous and next chapter cards at the bottom of guide content.

Props

PropTypeRequiredDefaultDescription
guideGuideYes-Current guide data
parentGuideGuide | nullNo-Parent guide (if current is a chapter)
currentPathstringYes-Current page path for navigation logic

Usage

import ChapterPagination from '@/components/molecules/ChapterPagination';
import { getParentGuide } from '@/lib/contentstack';

// In a server component
const parentGuide = guide.chapter === true 
  ? await getParentGuide(path)
  : null;

<ChapterPagination
  guide={guide}
  parentGuide={parentGuide}
  currentPath={path}
/>

Features

  • Previous/Next navigation: Shows clickable cards for previous and next chapters
  • Main guide support: Shows main guide as "Previous" when viewing first chapter
  • First chapter link: Shows first chapter as "Next" when viewing main guide
  • Responsive layout: Single column on mobile, two columns on desktop
  • Hover effects: Cards highlight with teal accent color on hover
  • Title component: Uses Title atom with paragraph tag for semantic HTML

Behavior

For Main Guides (not chapters)

  • Shows first chapter as "Next" card if viewing the main guide
  • No "Previous" card shown (main guide is the starting point)

For Chapters

  • Shows previous chapter as "Previous" card
  • Shows next chapter as "Next" card
  • Shows main guide as "Previous" when viewing the first chapter
  • Only shows cards when there are chapters to navigate to

Rendering Logic

The component renders when:

  • Guide has chapters (guide.chapters.length > 0)
  • At least one navigation target exists (previous or next)

Returns null if:

  • No chapters exist
  • Neither previous nor next navigation targets exist

Each navigation card displays:

  • Label: "Previous" or "Next" with directional arrow (← or →)
  • Title: Chapter or guide title using Title component (as <p> tag)
  • Description: Optional metadata description (if available)
  • Link: Full card is clickable, navigates to chapter/guide URL

Styling

  • Cards: bg-surface-2 with rounded corners, padding (p-4)
  • Hover state: Border appears on hover (hover:border-border-strong), title color changes to teal accent
  • Layout: CSS Grid with responsive columns (1 on mobile, 2 on desktop)
  • Typography: Uses design system utilities (cs-h4, cs-h5, cs-xs-body)
  • Right alignment: Next card content is right-aligned on desktop for visual balance

Notes

  • Server-side component (can use async/await)
  • Filters out chapters without URLs
  • Uses Next.js Link for client-side navigation
  • Uses Title atom component for consistent typography
  • Positioned after guide content, before additional items (FAQ, Related Items)
  • Handles edge cases (no chapters, first/last chapter, main guide)