Contents list

These examples are used for automated tests and may not follow service manual best practice.

Contents list default

Open this example in a new tab: Contents list default

Code

Markup

<nav class="nhsuk-contents-list" role="navigation" aria-label="Pages in this guide">
  <h2 class="nhsuk-u-visually-hidden">Contents</h2>
  <ol class="nhsuk-contents-list__list">
    <li class="nhsuk-contents-list__item" aria-current="page">
      <span class="nhsuk-contents-list__current">What is AMD?</span>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Symptoms</a>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Getting diagnosed</a>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Treatments</a>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Living with AMD</a>
    </li>
  </ol>
</nav>

Macro

{% from "contents-list/macro.njk" import contentsList -%}

{{ contentsList({
  items: [
    {
      href: "#",
      text: "What is AMD?",
      current: true
    },
    {
      href: "#",
      text: "Symptoms"
    },
    {
      href: "#",
      text: "Getting diagnosed"
    },
    {
      href: "#",
      text: "Treatments"
    },
    {
      href: "#",
      text: "Living with AMD"
    }
  ]
}) }}

Contents list with empty items

Open this example in a new tab: Contents list with empty items

Code

Markup

<nav class="nhsuk-contents-list" role="navigation" aria-label="Pages in this guide">
  <h2 class="nhsuk-u-visually-hidden">Contents</h2>
  <ol class="nhsuk-contents-list__list">
    <li class="nhsuk-contents-list__item" aria-current="page">
      <span class="nhsuk-contents-list__current">What is AMD?</span>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Symptoms</a>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Treatments</a>
    </li>
  </ol>
</nav>

Macro

{% from "contents-list/macro.njk" import contentsList -%}

{{ contentsList({
  items: [
    {
      href: "#",
      text: "What is AMD?",
      current: true
    },
    {
      href: "#",
      text: "Symptoms"
    },
    false,
    {
      href: "#",
      text: "Treatments"
    },
    false
  ]
}) }}

Contents list with nested lists

Open this example in a new tab: Contents list with nested lists

Code

Markup

<nav class="nhsuk-contents-list" role="navigation" aria-label="Pages in this guide">
  <h2 class="nhsuk-u-visually-hidden">Contents</h2>
  <ol class="nhsuk-contents-list__list">
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Chapter 1</a>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Chapter 2</a>
      <ol class="nhsuk-contents-list__list">
        <li class="nhsuk-contents-list__item">
          <a class="nhsuk-contents-list__link" href="#">Section 2.1</a>
        </li>
        <li class="nhsuk-contents-list__item">
          <a class="nhsuk-contents-list__link" href="#">Section 2.2</a>
        </li>
      </ol>
    </li>
    <li class="nhsuk-contents-list__item">
      <a class="nhsuk-contents-list__link" href="#">Chapter 3</a>
    </li>
  </ol>
</nav>

Macro

{% from "contents-list/macro.njk" import contentsList -%}

{{ contentsList({
  items: [
    {
      href: "#",
      text: "Chapter 1"
    },
    {
      href: "#",
      text: "Chapter 2",
      items: [
        {
          href: "#",
          text: "Section 2.1"
        },
        {
          href: "#",
          text: "Section 2.2"
        }
      ]
    },
    {
      href: "#",
      text: "Chapter 3"
    }
  ]
}) }}