Example

---

Macro

{{ contentsList({
    items: [
      {
        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/",
        text: "What is AMD?",
        current: "true"
      },
      {
        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/",
        text: "Symptoms"
      },
      {
        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/getting-diagnosed/",
        text: "Getting diagnosed"
      }
      ,
      {
        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/treatment/",
        text: "Treatments"
      }
      ,
      {
        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/living-with-amd/",
        text: "Living with AMD"
      }
    ]
}) }}
  

---

HTML

<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="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/">Symptoms</a>
      </li>
      <li class="nhsuk-contents-list__item">
        <a class="nhsuk-contents-list__link" href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/getting-diagnosed/">Getting diagnosed</a>
      </li>
      <li class="nhsuk-contents-list__item">
        <a class="nhsuk-contents-list__link" href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/treatment/">Treatments</a>
      </li>
      <li class="nhsuk-contents-list__item">
        <a class="nhsuk-contents-list__link" href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/living-with-amd/">Living with AMD</a>
      </li>
    </ol>
</nav>