UX Patterns Guide
UI + UX Navigation And Wayfinding standard

Related links

Provide a curated related-links collection that names the relationship between the current content and each destination, uses descriptive link text, discloses external or file destinations, and stays separate from primary actions and orientation navigation.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • The current page has a few genuinely adjacent pages, services, programs, or resources users often need next.
  • The related destination is optional support rather than the page's primary action.
  • Users may not know the name of the related destination without a curated prompt.
  • The link relationship can be explained with clear text, a relation label, or placement near the relevant content.

Avoid when

  • Links are only loosely associated by topic tags or organizational ownership.
  • The destination is a primary call to action that should be prominent in the main content.
  • The destination is an ancestor page, same-page section, transaction step, or utility action.
  • There are too many related links to scan without grouping or a hub page.
  • The team cannot maintain external, file, or generated link relevance.

Problem it prevents

Users who finish reading or acting on a page may need a small set of adjacent pages, services, or references, but generated or unsorted link lists often distract them with weak, stale, or ambiguous destinations.

Pattern anatomy

What a strong implementation has to make clear

User need

The current page is useful on its own but naturally leads to a few adjacent service, guidance, or reference destinations.

Pattern promise

Provide a curated related-links collection that names the relationship between the current content and each destination, uses descriptive link text, discloses external or file destinations, and stays separate from primary actions and orientation navigation.

Required state

Default state with a labelled, curated related-links block and descriptive link text.

Recovery path

The block becomes a long unsorted list of things someone thought might be interesting.

Access contract

Use descriptive link text that makes sense out of context.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A benefits guidance page ends with Related links: Check eligibility for support, Upload evidence for your claim, and Appeal a support decision, each with a concise relation label.
  • An external calculator link says Find an independent benefits calculator on MoneyHelper and includes an external label.
  • A user reads claim renewal guidance, chooses Upload evidence for your claim, and sees why that destination is the next useful service page.
  • A user can distinguish optional supporting guidance from the primary Apply button and does not lose their task path.
Weak implementation

Vague, hidden, hard to recover from

  • A page ends with More information containing Home, Contact us, Apply now, Old 2018 guidance, Help, and an unrelated account settings link.
  • A related-link list uses generic labels such as More, Details, Read this, and Click here.
  • Users follow a generic More information link and land on an unrelated policy collection.
  • A user expects a related link to open another page, but it jumps to a same-page anchor with no context.
UI guidance
  • Render a short, labelled collection of links whose destinations are closely related to the current content, using destination-specific link text and optional relation labels such as service, guidance, external, or PDF.
  • Place related links near the end of the relevant content section or page, keep the list scannable, and visually separate it from primary calls to action, breadcrumbs, same-page contents, and global navigation.
UX guidance
  • Use related links to support users who have finished or understood the current content and need a relevant next page, adjacent service, reference, or follow-up resource.
  • Curate links from user need and evidence, not tags alone; remove weak, stale, duplicate, or generic links so users do not interpret the list as a dumping ground.
Implementation contract

What the implementation must handle

States

  • Default state with a labelled, curated related-links block and descriptive link text.
  • Selected or reviewed state showing which related destination was chosen or previewed.
  • External-link state with destination context and external disclosure.
  • File-link state with file type and size or page-hosted document guidance.

Interaction

  • Activating a related link navigates to a different page, service, or resource unless the link text explicitly says it is a jump link.
  • The current page's primary action, hierarchy, and same-page contents remain visually and semantically separate from related links.
  • Link labels and relation labels accurately predict the destination and why it is useful from this page.
  • External and file destinations provide enough context before navigation or download.

Accessibility

  • Use descriptive link text that makes sense out of context.
  • Do not reuse identical link text for different destinations.
  • Use a heading or labelled navigation region so assistive technology users know the block contains related content.
  • Disclose external sites, downloads, file types, sizes, or language changes in text, not only icons.

Review

  • What user need does each related link satisfy from this exact page?
  • Would users expect this link to be a next page, a same-page jump, a parent page, a primary action, or an external resource?
  • Can the link text make sense in a screen-reader link list?
  • Which links are optional support versus the main task users came to complete?
Interactive lab

Inspect the states before you copy the pattern

Select a related link, inspect why it belongs, compare external and file disclosures, and reject the stale catch-all list.

Related links
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default state with a labelled, curated related-links block and descriptive link text.

Keyboard / Access

Tab reaches related links after the content they support, unless the block is intentionally placed in a side rail with a predictable landmark order.

Avoid Generating

Using related links as a catch-all further-reading dump.
Evidence trail

Source-backed claims behind this guidance

VA.gov Link Collection

VA.gov Design System - checked

VA Link Collection defines related links for closely related programs and services and distinguishes them from section, major, quick, CTA, and table-of-contents links.

GOV.UK content guidance: Write effective links

Government Digital Service - checked

GOV.UK effective-link guidance requires contextual, descriptive links and warns against unsorted further-reading lists, too many links, unsafe external links, and direct file links without context.

NHS Contents list

NHS digital service manual - checked

NHS Contents list guidance clarifies when grouped related-page navigation needs current-page state and pagination rather than a generic related-links block.

USWDS Link

U.S. Web Design System - checked

USWDS link guidance supports destination clarity, external-link context, jump-link identification, and file type and size disclosure.

Full agent/debug reference

Problem Context

  • The current page is useful on its own but naturally leads to a few adjacent service, guidance, or reference destinations.
  • Users may not know the exact term to search for next, but related destinations are predictable from the current page's task or topic.
  • The page also has primary actions, breadcrumbs, in-page anchors, or local navigation that must not be confused with optional onward links.

Selection Rules

  • Choose related links when each destination has a clear, evidenced relationship to the current page and is useful after or alongside the current content.
  • Keep the set short and curated; when the list grows long, group by relationship or move the navigation responsibility to a hub, contents list, search, or taxonomy page.
  • Use descriptive link text that makes sense out of context and usually matches the destination page title or task action.
  • Disclose external sites, file downloads, formats, sizes, and different-language destinations when those details affect user expectation.
  • Place links at the end of the relevant content block unless a link is needed in context at the exact point of use.
  • Do not include primary CTAs, account utilities, global destinations, same-page anchors, or breadcrumb ancestors as related links.
  • Review generated or tagged links manually for relevance, freshness, duplicates, and unsafe external destinations.
  • Use a contents list or pagination for a small ordered guide; use breadcrumbs for parent hierarchy; use in-page anchors for same-page sections.

Required States

  • Default state with a labelled, curated related-links block and descriptive link text.
  • Selected or reviewed state showing which related destination was chosen or previewed.
  • External-link state with destination context and external disclosure.
  • File-link state with file type and size or page-hosted document guidance.
  • Empty or insufficient-relevance state where the block is omitted instead of filled with weak links.
  • Stale or generated-link review state where content owners remove expired, duplicate, or weak links.

Interaction Contract

  • Activating a related link navigates to a different page, service, or resource unless the link text explicitly says it is a jump link.
  • The current page's primary action, hierarchy, and same-page contents remain visually and semantically separate from related links.
  • Link labels and relation labels accurately predict the destination and why it is useful from this page.
  • External and file destinations provide enough context before navigation or download.
  • Visited, reviewed, or selected styling may help users track which related destination they inspected, but it must not imply current-page state.
  • The related-links block is removed when no links are sufficiently relevant.

Implementation Checklist

  • Write down the user need for each proposed related link and remove links without a clear relationship.
  • Use a labelled region or navigation landmark such as Related links or Related content when the block acts as navigation.
  • Keep the first few words of each link meaningful and destination-specific.
  • Add relation labels or short supporting text only when they clarify why the link belongs.
  • Mark external sites, files, languages, or downloads consistently and check that external destinations are safe and accessible.
  • Avoid duplicate destinations with different labels and duplicate labels pointing to different destinations.
  • Schedule link review or use content ownership so stale and generated links do not stay complete by accident.

Common Generated-UI Mistakes

  • Using related links as a catch-all further-reading dump.
  • Adding every tagged page without human curation.
  • Putting primary task actions or account utilities into related links.
  • Using vague link text such as More, Read this, Click here, or Details.
  • Mixing same-page anchors, parent hierarchy links, external links, and file downloads without context.
  • Leaving stale or broken links because the list is generated automatically.
  • Adding so many related links that users stop scanning them.

Critique Questions

  • What user need does each related link satisfy from this exact page?
  • Would users expect this link to be a next page, a same-page jump, a parent page, a primary action, or an external resource?
  • Can the link text make sense in a screen-reader link list?
  • Which links are optional support versus the main task users came to complete?
  • Who owns checking that external, file, and generated links stay relevant and safe?
Accessibility
  • Use descriptive link text that makes sense out of context.
  • Do not reuse identical link text for different destinations.
  • Use a heading or labelled navigation region so assistive technology users know the block contains related content.
  • Disclose external sites, downloads, file types, sizes, or language changes in text, not only icons.
  • Keep the block short enough that keyboard users are not forced through a large unrelated list.
  • Do not use heading levels or cards in ways that imply the related links are the main content hierarchy.
Keyboard Behavior
  • Tab reaches related links after the content they support, unless the block is intentionally placed in a side rail with a predictable landmark order.
  • Enter activates each link with normal link behavior.
  • Visited, reviewed, or selected styling does not remove focus indication.
  • Keyboard users can skip or bypass the block if it appears before main content in a side rail.
  • A related-link preview or disclosure must be dismissible and must not trap focus.
Variants
  • Related content block
  • Related services links
  • Related guidance links
  • Related documents list
  • Contextual related links
  • Right-rail related links
  • Grouped related links
  • Reviewed related links

Verification

Last verified: