| UI or UX | UI + UX - Curated onward links connected to the current content | UI + UX - Same-page section jump links for long content | UI + UX - Hierarchy orientation navigation |
| 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. | Render a labelled navigation landmark with links to major headings on the current page, using labels that match or clearly summarize the destination sections. | Render a labeled breadcrumb nav as an ordered hierarchy from the broadest relevant ancestor to the current page, with real ancestor links and a distinct current-page item. |
| 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. | Use in-page anchor navigation to help users understand the contents of a long page and jump directly to the section they need without leaving the page. | Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page. |
| Good UI | 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 article starts with an 'On this page' nav linking to Eligibility, Documents, Fees, and After you apply, each matching an H2 on the same page. | Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current. |
| Bad UI | A page ends with More information containing Home, Contact us, Apply now, Old 2018 guidance, Help, and an unrelated account settings link. | A short page with two paragraphs shows a table of contents that adds more navigation than content. | Recent clicks are displayed as if they were the page hierarchy. |
| Good UX | 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 opens a long guidance page, chooses Fees, and lands at the Fees heading with the Fees link marked active. | Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects. |
| Bad UX | Users follow a generic More information link and land on an unrelated policy collection. | Clicking a jump link scrolls visually but keyboard focus stays in the contents list. | The breadcrumb changes after every click, so the same page shows different trails for different users. |
| Best fit | The current page has a few genuinely adjacent pages, services, programs, or resources users often need next. | A long content page has several meaningful sections users may want to jump to. | Pages sit inside a clear parent-child hierarchy. |
| Avoid when | Links are only loosely associated by topic tags or organizational ownership. | The page is short enough that the headings are already visible. | The app has a flat structure with no meaningful parent levels. |
| Required state | Default state with a labelled, curated related-links block and descriptive link text. | Default state with a labelled same-page navigation list near or beside long content. | Interior page with full ancestor trail. |
| Accessibility burden | Use descriptive link text that makes sense out of context. | Wrap the jump links in a labelled navigation landmark so assistive technology users can find the page contents list. | Place the trail in a labeled nav element. |
| Common misuse | Using related links as a catch-all further-reading dump. | Using in-page anchors as a substitute for side navigation across different pages. | Showing browsing history instead of hierarchy. |