Page Loading

Anchor list component

An anchor list lets users skip down the page by clicking a link to the relevant content. It also includes ‘skip back’ links to help users jump back to the content list.

Anchor list example

Introduction to de minimis

Back to contents list

Back to contents list

We've added some full width examples of the anchor list component to the end of this page.

How to use the anchor list component

Use the anchor list when:

  • Users may need to skip to specific sections of content
  • Users don’t need to read all the content
  • Users don’t need to read content in a specific order  
  • There’s a lot of content, and users may be put off scrolling to find the part they need

The anchor list also includes a ‘back to content list’ link after each section to help users jump back to the list of links.  

You can add most components to an anchor list, but remember that a span of 8 applies to the whole anchor list. For this reason, you shouldn’t add a 50:50 to an anchor list.  

Adding an anchor list to the CMS

Similar to other nested components like accordions or tabs, you first need to add an anchor list component, then each individual anchor item, and then individual components inside each item.

Using a template

You can create an anchor list using a template. Just choose 'Anchor listing' as the page template when creating a page. 

From scratch

You can also create an anchor list from scratch by adding an anchor list component to a new or existing panel. The standard process and the SDI process are slightly different.

To add an anchor list to an existing page, you should:

  1. Add an ‘Anchor List Component’ to a new or existing panel
  2. Give your anchor list a title – something like ‘Contents’ or ‘On this page’ – and choose whether it should be an ordered list (displayed as a numbered list) or unordered list (displayed as a bullet list)
  3. Set the alignment of the anchor list panel to top left
  4. Within the anchor list component, add an ‘Anchor List Item Component’
  5. Within the anchor list item component, add a panel and set the panel span to 8
  6. Add the components you need to the panel as normal. You can choose from most of the available components. 
  7. If you need to add another panel to the list item, you can
  8. Add as many further 'Anchor List Item Components' as you need

It should look something like this in the CMS:

  • Panel
    • Anchor list component
      • List item 1
        • Panel
          • Component 1
          • Component 2
      • List item 2
        • Panel 1
          • Component 1
          • Component 1
        • Panel 2
          • Component 1
      • List item 3
        • Panel
          • Component 1
          • Component 2

To add an anchor list to an existing page, you should:

  1. Add an ‘Anchor List Component’ to a new or existing panel. Set the panel span to 8
  2. Give your anchor list a title – something like ‘Contents’ or ‘On this page’ – and choose whether it should be an ordered list (displayed as a numbered list) or unordered list (displayed as a bullet list)
  3. Within the anchor list component, add an ‘Anchor List Item Component’
  4. Within the anchor list item component, add a panel
  5. Add the components you need to the panel as normal. You can choose from most of the available components. 
  6. If you need to add another panel to the list item, you can
  7. Add as many further 'Anchor List Item Components' as you need

It should look something like this in the CMS:

  • Panel
    • Anchor list component
      • List item 1
        • Panel
          • Component 1
          • Component 2
      • List item 2
        • Panel 1
          • Component 1
          • Component 1
        • Panel 2
          • Component 1
      • List item 3
        • Panel
          • Component 1
          • Component 2

Anchor list modifier rules

  • Background: default (white). Adding a different background will add that background to the full anchor list component, including all the subsequent content within the list
  • Grid span: 8
    • Standard - applied at individual panel levels within each list item. Span removed on pages with left hand navigation
    • SDI - applied at top panel level - i.e the panel that contains the anchor list component itself
  • Padding: default, unless required to improve layout
  • Alignment: top left as standard, default for SDI

Accessibility

Use clear, descriptive headings so users know which link they want to click.

Users can navigate back to top after reading each section, which makes it easier for users using keyboard control or assistive technology.  

Evidence and research

We’ve used a similar pattern on FindBusinessSupport.gov.scot. User testing and live analytics data suggests this pattern is effective and easy to use.  

Anchor list example - standard

This is how the component appears as standard across sites like SE and FBS. It has a span of 8 and is aligned to the left of the page.

Introduction to de minimis

Back to contents list

Back to contents list

Back to contents list

Anchor list example - SDI

This is how the component should appear on SDI. It's aligned down the centre of the page, with a span of 8.

Introduction to de minimis

Back to contents list

Back to contents list

Back to contents list