Navigation - List panel

Use the list panel to host the links in pages which use the A to Z pattern.

Open this default list panel example in new window
Copy default list panel code 
<div class="hse-list-panel">
  <div class="hse-list-panel__wrap">
    <h2 class="hse-list-panel__label" id="A">A</h2>
    <ul class="hse-list-panel__list hse-list-panel__list--with-label">
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">Abscess</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/acne/">Acne</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/acute-cholecystitis">Acute cholecystitis</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/addisons-disease">Addison&#39;s disease</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/allergic-rhinitis/">Allergic Rhinitis</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/allergies/">Allergies</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/alpha-1-antitrypsin-deficiency/">Alpha-1 antitrypsin deficiency</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/angina/">Angina</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/ankle-pain/">Ankle pain</a>
      </li>
      <li class="hse-list-panel__item">
        <a class="hse-list-panel__link" href="/conditions/antacids/">Antacids</a>
      </li>
    </ul>
  </div>
  <div class="hse-back-to-top">
    <a class="hse-back-to-top__link" href="#hse-nav-a-z">
      <svg class="hse-icon hse-icon__chevron-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.004 7.996a1 1 0 0 1 .71.29l5 5a1.004 1.004 0 1 1-1.42 1.42l-4.29-4.3-4.29 4.3a1.004 1.004 0 0 1-1.42-1.42l5-5a1 1 0 0 1 .71-.29Z"></path>
      </svg>
      <span class="hse-back-to-top__title">Back to top</span>
    </a>
  </div>
</div>
Close default list panel 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 list panel
Name Type Required Description
Name id Type string Required false Description This is used for the main component and to compose id attribute for each item.
Name label Type string Required true Description Item-specific label attribute.
Name backToTop Type boolean Required false 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.
Copy default list panel code 
{% from 'list-panel/macro.njk' import listPanel %}

{{ listPanel({
            "label": "A",
            "id": "A",
            "backToTop": "true",
            "backToTopLink": "#hse-nav-a-z",
            "items": [
              {
                "URL": "/conditions/abdominal-aortic-aneurysm/",
                "link": "Abdominal aortic aneurysm"
              },
              {
                "URL": "/conditions/abdominal-aortic-aneurysm/",
                "link": "Abscess"
              },
              {
                "URL": "/conditions/acne/",
                "link": "Acne"
              },
              {
                "URL": "/conditions/acute-cholecystitis",
                "link": "Acute cholecystitis"
              },
              {
                "URL": "/conditions/addisons-disease",
                "link": "Addison's disease"
              },
              {
                "URL": "/conditions/allergic-rhinitis/",
                "link": "Allergic Rhinitis"
              },
              {
                "URL": "/conditions/allergies/",
                "link": "Allergies"
              },
              {
                "URL": "/conditions/alpha-1-antitrypsin-deficiency/",
                "link": "Alpha-1 antitrypsin deficiency"
              },
              {
                "URL": "/conditions/angina/",
                "link": "Angina"
              },
              {
                "URL": "/conditions/ankle-pain/",
                "link": "Ankle pain"
              },
              {
                "URL": "/conditions/antacids/",
                "link": "Antacids"
              }
            ]
          }) }}
Close default list panel code

When to use the list panel

Use the list panel when building an A to Z to navigate a group of related topics. For example, the health A to Z conditions page.

How to use the list panel

The list panel has a list of links grouped by their first letter.

The letter is displayed as a title for the panel.

There is a back-to-top link below each panel.

Updated: September 2023