| UI or UX | UI + UX - Same-page section jump links for long content | UI + UX - Hierarchy orientation navigation | UI + UX - Persistent local hierarchy at the side of content |
| UI guidance | 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. | Render a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. |
| UX guidance | 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. | Use side navigation to help users move within a complex section without losing the current page's position in that section. |
| Good UI | 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. | A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. |
| Bad UI | 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. | A sidebar mixes Dashboard, Reports, Sign out, Help, Team, API, Billing, and Marketing with no section grouping. |
| Good UX | 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. | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. |
| Bad UX | 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. | Users must reopen a drawer every time they move between sibling pages in the same desktop section. |
| Best fit | A long content page has several meaningful sections users may want to jump to. | Pages sit inside a clear parent-child hierarchy. | A product area has several related pages arranged in a visible hierarchy. |
| Avoid when | The page is short enough that the headings are already visible. | The app has a flat structure with no meaningful parent levels. | The product only has a few pages and does not need a hierarchy. |
| Required state | Default state with a labelled same-page navigation list near or beside long content. | Interior page with full ancestor trail. | Default state with the local section hierarchy visible beside content. |
| Accessibility burden | 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. | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. |
| Common misuse | Using in-page anchors as a substitute for side navigation across different pages. | Showing browsing history instead of hierarchy. | Duplicating global navigation links in the side navigation. |