Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

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"
    }
  ]
}) }}

Contents list with visually hidden text

Open this example in a new tab: Contents list with visually hidden text

Code

Markup

<nav class="nhsuk-contents-list" role="navigation" aria-label="Pages in this guide">
  <h2 class="nhsuk-u-visually-hidden">Table of 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({
  visuallyHiddenText: "Table of contents",
  items: [
    {
      href: "#",
      text: "What is AMD?",
      current: true
    },
    {
      href: "#",
      text: "Symptoms"
    },
    {
      href: "#",
      text: "Getting diagnosed"
    },
    {
      href: "#",
      text: "Treatments"
    },
    {
      href: "#",
      text: "Living with AMD"
    }
  ]
}) }}