# 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.

```astro
---
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](/en/docs/reference/components.md#previous-and-next-components) 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`