Contents list
When to use this component
Use the contents list component to allow users to navigate to different sections within a page or to different pages.
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.
HTML examples
Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.
If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name.
Retain any prefixed or suffixed text related to the schema name.
For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).
This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.
With dashes
With dashes
<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 commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<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>
{% endblock %}Without dashes
Display the contents list without dashes preceding each link.
Without dashes
<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 commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<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>
{% endblock %}Nested child links
Use nested child links to illustrate structural relationships between child pages or page headers.
Nested child links
<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 commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<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>
{% endblock %}Nested child links with bold parent links
Highlight parent links in bold to emphasise structural relationships between parent and child pages or headers.
Nested child links with bold parent links
<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 commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<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>
{% endblock %}If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.