Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

PostNavigation

Previous and next article links at the end of a post.

Post@gaudi/design-system/post/PostNavigationView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import PostNavigation from '@gaudi/design-system/post/PostNavigation';

Usage

import { PostNavigation } from '@gaudi/design-system';
<PostNavigation prev={previousPost} next={nextPost} />

Examples

Playground

Storybook

API

3 props

Accessibility

Links name their destinations. Do not render empty links when one adjacent article is unavailable.

Post listsBlog-post sections using the same Post summaries and article data as the blog pages. Image cards, featured articles, horizontal rows, and compact archives reuse one component.PostHeaderArticle title, metadata, timestamps and supporting header controls.PostSeriesBoxList the articles in a series and identify the current entry.TableOfContentsResponsive article navigation with active sections, expandable heading branches, and an optional diagram and table index. Reuses Scrollspy, Collapsible, Link and the shared expansion hook.