Previous and Next

The previous and next pages follow the order of the document tree, which is the sidebar’s order from top to bottom. Groups and external links are skipped.

---
import { Pager } from '@minidocs/astro/components';
import { navState, neighbors } from '@minidocs/astro/runtime';

const nav = navState(tree, id);
const { prev, next } = neighbors(tree, id);
---

<Pager.Root label="Pagination">
  {prev && (
    <Pager.Link rel="prev" href={nav.of(prev).href}>
      <Pager.Label>Previous</Pager.Label>
      <Pager.Title>{prev.label}</Pager.Title>
    </Pager.Link>
  )}
  {next && (
    <Pager.Link rel="next" href={nav.of(next).href}>
      <Pager.Label>Next</Pager.Label>
      <Pager.Title>{next.label}</Pager.Title>
    </Pager.Link>
  )}
</Pager.Root>

Links come from nav.of(node).href, the same nav the sidebar uses. On multilingual sites, use tree[locale] instead of tree.

rel is prev or next and decides whether the link sits on the left or the right; with only a next page, it still sits on the right. Text such as “Previous” and “Next” goes in Pager.Label, so you can reword or translate it. See Components and Styles for the props of each component.

Rules

• When a page appears in the tree more than once, its first position counts
• The first page has no previous page and the last has no next page, so prev or next is undefined