Contents list

When to use this component

Use a contents list at the top of a page to facilitate user navigation within a small group of related pages or page sections.

When to not use this component

Avoid using a contents list on pages that lack clear grouping or related content, as this may confuse users.

Additionally, do not incorporate a contents list in transactional services or forms. Instead, use alternative components such as buttons for navigation or back links.

How it works

Ensure that links are concise and descriptive, as overly lengthy links (exceeding two lines) hinder user scanning. Page titles or headers must accurately reflect the content of the page to provide users with clear navigation cues.

Customisation options

• Without dashes: You can choose not to use dashes before your links by removing the dfe-contents-list__list-item--dashed class from the list item.
• Bold links: You can enhance the visibility of links by adding the dfe-contents-list__list-item--parent class to the list item. This is particularly useful for showcasing parent-child page or page content relationships in nested contents lists.

HTML examples

Select the appropriate example below and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated earlier. Refer to the layouts section for further guidance on structuring your web template.

With dashes

Contents list component

      
      
<div class="dfe-contents-container">
  <nav class="dfe-contents-list">
    <h2 class="dfe-contents-list__title">Contents</h2>
    <ol class="dfe-contents-list__list">
      <li class="dfe-contents-list__list-item dfe-contents-list__list-item--dashed">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 1</a>
      </li>          
      <li class="dfe-contents-list__list-item dfe-contents-list__list-item--dashed">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 2</a>
      </li>
      <li class="dfe-contents-list__list-item dfe-contents-list__list-item--dashed">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 3</a>
      </li>
    </ol>
  </nav>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

Without dashes

Display the contents list without dashes preceding each link.

Contents list component

      
      
<div class="dfe-contents-container">
  <nav class="dfe-contents-list">
    <h2 class="dfe-contents-list__title">Contents</h2>
    <ol class="dfe-contents-list__list">
      <li class="dfe-contents-list__list-item">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 1</a>
      </li>          
      <li class="dfe-contents-list__list-item">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 2</a>
      </li>
      <li class="dfe-contents-list__list-item">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 3</a>
      </li>
    </ol>
  </nav>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

Nested child links

Use nested child links to illustrate structural relationships between child pages or page headers.

Contents list component

      
      
<div class="dfe-contents-container">
  <nav class="dfe-contents-list">
    <h2 class="dfe-contents-list__title">Contents</h2>
    <ol class="dfe-contents-list__list">
      <li class="dfe-contents-list__list-item">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 1</a>
      </li>          
      <li class="dfe-contents-list__list-item">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 2</a>
        <ol class="dfe-contents-list__nested-list">
          <li class="dfe-contents-list__list-item dfe-contents-list__list-item--dashed">
            <a class="dfe-contents-list__link govuk-link" href="#">Child page 1</a>
          </li>          
          <li class="dfe-contents-list__list-item dfe-contents-list__list-item--dashed">
            <a class="dfe-contents-list__link govuk-link" href="#">Child page 2</a>
          </li>
        </ol>
      </li>
      <li class="dfe-contents-list__list-item">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 3</a>
      </li>
    </ol>
  </nav>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

Nested child links with bold parent links

Highlight parent links in bold to emphasise structural relationships between parent and child pages or headers.

Contents list component

      
      
<div class="dfe-contents-container">
  <nav class="dfe-contents-list">
    <h2 class="dfe-contents-list__title">Contents</h2>
    <ol class="dfe-contents-list__list">
      <li class="dfe-contents-list__list-item dfe-contents-list__list-item--parent">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 1</a>
      </li>          
      <li class="dfe-contents-list__list-item dfe-contents-list__list-item--parent">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 2</a>
        <ol class="dfe-contents-list__nested-list">
          <li class="dfe-contents-list__list-item dfe-contents-list__list-item--dashed">
            <a class="dfe-contents-list__link govuk-link" href="#">Child page 1</a>
          </li>          
          <li class="dfe-contents-list__list-item dfe-contents-list__list-item--dashed">
            <a class="dfe-contents-list__link govuk-link" href="#">Child page 2</a>
          </li>
        </ol>
      </li>
      <li class="dfe-contents-list__list-item dfe-contents-list__list-item--parent">
        <a class="dfe-contents-list__link govuk-link" href="#">Page 3</a>
      </li>
    </ol>
  </nav>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.