Related Pages

The related frontmatter array renders a "Related pages" card grid under the article body. Every entry is looked up 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.

Quick Start

One path renders one card, and the card title is the page's navigation name — not the string you typed, 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 you wrote them in, so the first entry is the next step you want the reader to take.

---
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 page you're on, 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 are worth knowing:

• On an archived version under app/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 gives you 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 unless you build the array yourself.

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

Options