What the person is doing
The current page is useful on its own but naturally leads to a few adjacent service, guidance, or reference destinations.
Foundation · lesson 6 of 21 · Navigation And Wayfinding
Related links
Underlying principle: Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.
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.
Study the interaction
Follow the task before choosing the component
Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.
What the interface must communicate
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.
Default state with a labelled, curated related-links block and descriptive link text.
What to look for
What user need does each related link satisfy from this exact page?
Activating a related link navigates to a different page, service, or resource unless the link text explicitly says it is a jump link.
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.
- 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.
Problem it prevents
The current page is useful on its own but naturally leads to a few adjacent service, guidance, or reference destinations.
Test the behavior
Try strong and weak versions of the interaction
Open the working example, try its controls, and compare the behavior against the decision guidance.
In the lab you can
Launch Related links in the lab - switch between strong UI, weak UI, strong UX, and weak UX;
- trigger required, empty, loading, error, and recovery states;
- inspect keyboard and accessibility expectations beside the demo.
Pattern anatomy
What a strong implementation has to make clear
The current page is useful on its own but naturally leads to a few adjacent service, guidance, or reference destinations.
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.
Default state with a labelled, curated related-links block and descriptive link text.
The block becomes a long unsorted list of things someone thought might be interesting.
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 PDF guidance link includes the document type and size beside the link text.
- A user reads claim renewal guidance, chooses Upload evidence for your claim, and sees why that destination is the next useful service page.
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.
- A same-page Fees anchor, a breadcrumb parent, and a sign-out action are mixed into one related content block.
- Users follow a generic More information link and land on an unrelated policy collection.
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.
- Use a heading or labelled navigation region so assistive technology users know the block contains related content.
- 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.
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?
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
Source trail checked: