Contents links

[govuk-design-system]

Also known as: Jump links, in-page navigation

What

A list of navigation links to the headings on a page or the pages in a guide on GOV.UK:

Why

• is this component needed on multiple services on GOV.UK?
• does the component meet the needs that it's intended to?
• is there already something in the Design System that meets these needs?

Anything else

[ignaciaorellana]

Here is a version from GOV.UK Publishing Components GOV.UK Publishing Component guide: Contents list

[ashleyanderton]

Over on Explore careers we've been working on something similar. We started on this before the Content links pattern was added to the backlog so our starting point was more of a basic content list (something we had used on our original service), AB research and final design shown below.

Copying from issue 176

• We tested a designed version of our anchor (content) links and in a lab environment users found them very useful. They currently have an engagement of around 5% on our BETA service vs 3% for the original.

• The overall need for anchor links was obtained via qualitative lab tests. The design for the jump links themselves were then AB tested on our live service with multiple variants. The current design was decided based on its increased engagement along with a lack of distraction from the content on the page.

A working example of jump links can be found on the BETA Explore careers website, part of the National Careers Service
https://beta.nationalcareersservice.direct.gov.uk/job-profiles/police-officer

A summary of the research performed along with the results of AB tests can be found on the following google doc:
https://drive.google.com/file/d/1Onz2hL-t1BO8l52rVUXgLcM5yVKzzlo4/view?usp=sharing

[frankieroberto]

HTML publications on GOV.UK (see example) use a different pattern:

In this case, the list is marked up as a <ol> within a <nav>, with the numbers included within the <a> link text, rather than being auto-generated via CSS.