Navigation - Links list

Use a links list to group links in a curated hub index page.

Open this default links list example in new window
Copy default links list code 
<div class="hse-links-list">
  <h2>links</h2>
  <ol class="hse-links-list__list">
    <li class="hse-links-list__item" aria-current="page">
      <span class="hse-links-list__current">What is AMD?</span>
    </li>
    <li class="hse-links-list__item">
      <a class="hse-links-list__link" href="https://www.hse.ie/conditions/age-related-macular-degeneration-amd/symptoms/">Symptoms</a>
    </li>
    <li class="hse-links-list__item">
      <a class="hse-links-list__link" href="https://www.hse.ie/conditions/age-related-macular-degeneration-amd/getting-diagnosed/">Getting diagnosed</a>
    </li>
    <li class="hse-links-list__item">
      <a class="hse-links-list__link" href="https://www.hse.ie/conditions/age-related-macular-degeneration-amd/treatment/">Treatments</a>
    </li>
    <li class="hse-links-list__item">
      <a class="hse-links-list__link" href="https://www.hse.ie/conditions/age-related-macular-degeneration-amd/living-with-amd/">Living with AMD</a>
    </li>
  </ol>
</div>
Close default links list code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default links list
Name Type Required Description
Name items Type array Required true Description Array of links.
Name items[].URL Type string Required true Description Href attribute for the link item.
Name items[].link Type string Required true Description Link item description.
Name items[].current Type boolean Required false Description Adding state to current link
Copy default links list code 
{% from 'links-list/macro.njk' import linksList %}

        {{ linksList({
          items: [
            {
              href: "https://www.hse.ie/conditions/age-related-macular-degeneration-amd/",
              text: "What is AMD?",
              current: "true"
            },
            {
              href: "https://www.hse.ie/conditions/age-related-macular-degeneration-amd/symptoms/",
              text: "Symptoms"
            },
            {
              href: "https://www.hse.ie/conditions/age-related-macular-degeneration-amd/getting-diagnosed/",
              text: "Getting diagnosed"
            }
            ,
            {
              href: "https://www.hse.ie/conditions/age-related-macular-degeneration-amd/treatment/",
              text: "Treatments"
            }
            ,
            {
              href: "https://www.hse.ie/conditions/age-related-macular-degeneration-amd/living-with-amd/",
              text: "Living with AMD"
            }
          ]
        })}}
Close default links list code

The links list is used on the index page of a curated hub. It forms part of the curated hub pattern.

The links will be repeated in the navigation at the end of each child page in the curated hub.

How to use a links list

Limit the number of links in a list to 8 links.

When a curated hub has more than 8 child pages, group the pages and separate the links lists using headers. For example, on the flu page.

Updated: September 2023