Related Pages

The related frontmatter array renders a "Related pages" card grid under the article body. The resolver looks up every entry in the navigation tree, so a card shows up only when the path matches a real page. The grid at the bottom of this page is the live example: two cards, from the two paths in this page's own frontmatter. What follows covers the resolver's cleanup rules and the props the component takes directly.

Quick Start

One path renders one card, and the card title is the page's navigation name, not the string in the array, and not the page's frontmatter title.

---
related:
  - /getting-started/introduction
---

With one or two entries the grid stays at two columns.

Adding Options

List three or more paths and the grid widens to three columns. Cards keep the order of the array, so the first entry is the next step for the reader.

---
related:
  - /getting-started/introduction
  - /features/code/code-blocks
  - /features/api/api-blocks
---

Advanced

The resolver tidies the list before anything renders. It adds a missing leading slash, skips a link back to the current page, drops repeats, ignores any entry that isn't a string, and renders nothing for a path with no matching page. Feed it the five entries below from a page at /features/platform/related-pages and two cards come out: param-fields and response-fields, in that order.

---
related:
  - features/api/param-fields
  - /features/api/response-fields
  - /features/api/response-fields
  - /features/platform/related-pages
  - /features/nothing-here
---

Two more behaviors round out the resolver:

• On an archived version under content/versions/, the resolver tries the version-prefixed path first (/v1/features/api/param-fields) and falls back to the plain path, so the same frontmatter works in both places.
• When nothing resolves, getRelatedPages hands back an empty array and the whole section, heading included, never reaches the page.

Calling the component directly opens two controls the frontmatter route doesn't expose: a custom heading, and a description line under each card title. getRelatedPages returns title and href only, so descriptions stay blank until a hand-built array supplies them.

<RelatedPages
  heading="Next steps"
  pages={[
    {
      title: 'Rate limits',
      href: '/guides/rate-limits',
      description: '60 requests per minute, per key.',
    },
  ]}
/>

Options