Sub-navigation

Skip to HTML example

When to use this component

Use the sub-navigation component to help users navigate between related pages or sections within a service.

Use sub-navigation when you need to:

help users navigate between related pages within a section
show the current page within a group of pages
provide quick access to sibling pages without returning to a parent page

When not to use this component

Do not use sub-navigation:

as the primary navigation for your service
when there are only one or two items to navigate between
for deep navigation hierarchies (consider a different pattern)

How it works

The sub-navigation component displays a horizontal list of links below the main navigation. The current page is highlighted with a bottom border.

On mobile devices, the navigation can be collapsed behind a toggle button to save space.

HTML example

Copy the HTML from this page directly into your web template.

<nav class="dfe-sub-navigation" aria-label="Sub-navigation">
  <div class="govuk-width-container">
    <ul class="dfe-sub-navigation__list">
      <li class="dfe-sub-navigation__item dfe-sub-navigation__item--active">
        <a class="dfe-sub-navigation__link" href="#" aria-current="page">Overview</a>
      </li>
      <li class="dfe-sub-navigation__item">
        <a class="dfe-sub-navigation__link" href="#">Eligibility</a>
      </li>
      <li class="dfe-sub-navigation__item">
        <a class="dfe-sub-navigation__link" href="#">How to apply</a>
      </li>
      <li class="dfe-sub-navigation__item">
        <a class="dfe-sub-navigation__link" href="#">After you apply</a>
      </li>
    </ul>
  </div>
</nav>

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 title %}{% endblock %}

{% block main %}

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

<nav class="dfe-sub-navigation" aria-label="Sub-navigation">
  <div class="govuk-width-container">
    <ul class="dfe-sub-navigation__list">
      <li class="dfe-sub-navigation__item dfe-sub-navigation__item--active">
        <a class="dfe-sub-navigation__link" href="#" aria-current="page">Overview</a>
      </li>
      <li class="dfe-sub-navigation__item">
        <a class="dfe-sub-navigation__link" href="#">Eligibility</a>
      </li>
      <li class="dfe-sub-navigation__item">
        <a class="dfe-sub-navigation__link" href="#">How to apply</a>
      </li>
      <li class="dfe-sub-navigation__item">
        <a class="dfe-sub-navigation__link" href="#">After you apply</a>
      </li>
    </ul>
  </div>
</nav>


{% endblock %}

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