Contents list: There is no visual differentiation between navigating within a page and across pages

[ChristineWuerth]

This is an inconsistency someone raised with us in the process of documenting the contents list component as part of the design documentation work:
In the contents list components we make no visual differentiation between navigating within a page and across pages. Should the same pattern both link to multiple pages, and scroll you down the same page? See what it does on a Whitehall guide vs Mainstream guide.
This could work harder with content, eg “Sections on this page” to differentiate from “Pages in this publication”.

[jon-kirwan]

Hi @ChristineWuerth, the difference here is that in the Mainstream guide example, the items redirect to a new page, and the styling is applied to the items to reflect the current page when it loads.

In contrast, the Whitehall guide example uses page anchors to navigate to sections within the same page which cannot apply the same styling (because there is no page reload).

That said, it may be possible to highlight the currently selected item using the :target pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:target. Will investigate.