BlogNav

Blog article sub-navigation: a back-to-articles action plus previous/next controls for stepping through the article sequence.

Status: stable. Group: navigation. Markdown version: /design-system/components/blog-nav.md

When to use

Sub-navigation for blog articles. Renders a back-to-articles action and previous/next controls that step through the article sequence, disabling the edges (and both when the route is not an article). Blog chrome; for site-wide nav use SiteHeader/NavLink.

When not to use

Do not hardcode a second article sequence in an application wrapper; pass the live ordered pages collection.
Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead.

Look-alikes

NavLink: Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead.
SiteHeader: Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead.

Props

BlogNav props
Prop	Type	Default	Description	Required
`currentPath`	`string`	none	Active route used to compute the prev/next disabled state. Defaults to the current pathname from the router; stories and tests override it to show a given position in the article sequence.	No
`pages`	`readonly BlogNavPage[]`	none	Ordered article paths. Defaults to the bundled legacy sequence.	No
`onNavigate`	`(path: string) => void`	none	Host navigation callback. Defaults to the configured navigation runtime.	No
`disabled`	`boolean`	`false`	Disables every action while host navigation is pending.	No

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

BlogNav rules
Level	Rule	How it is checked
MUST	ARIA: Wrapped in a nav landmark labelled via aria-label (blogNavLabel)	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Each Button sets accessibleName equal to its visible label and its icon is decorative (aria-hidden), so the name is announced once, including below 768px where the visible labels are hidden.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Back, previous and next are buttons that call the host navigate handler (onNavigate, or router.push by default), not links, so they carry no href.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
SHOULD	Pass the published article sequence from the host's content manifest.	Not stated in the contract.
SHOULD	Set disabled during pending host navigation to prevent duplicate requests.	Not stated in the contract.
SHOULD	Expect both adjacent controls to render disabled when the current route is absent from pages; the component handles this, so the host does not need to hide them.	Not stated in the contract.

Install and import

In-repo only. BlogNav is not exported from @digitaltableteur/react, so there is no public import path.