Adjacent Page Links

Methanol provides a helper to implement "Previous" and "Next" navigation, ensuring users can traverse your documentation in the intended order:

const { prev, next } = ctx.getSiblings() || {}

The returned sequence is automatically scoped to the current navigation root and respects the sidebar's display order.

Implementation Example

const PrevNext = ({ ctx }) => {
	const siblings = ctx.getSiblings()
	const prev = siblings?.prev
	const next = siblings?.next
	if (!prev && !next) return null

	return (
		<nav aria-label="Pagination">
			{prev ? <a href={prev.routeHref}>← {prev.title}</a> : <span />}
			{next ? <a href={next.routeHref}>{next.title} →</a> : <span />}
		</nav>
	)
}

export default function PageTemplate({ PageContent, ExtraHead, ctx }) {
	return (
		<>
			<html>
				<head>
					<ExtraHead />
				</head>
				<body>
					<main>
						<PageContent />
						<PrevNext ctx={ctx} />
					</main>
				</body>
			</html>
		</>
	)
}

Best Practices