Navigation - Page contents

Use a page contents component to display a list of links to the main sections of a page.

Copy code

<nav class="hse-u-margin-bottom-7" aria-labelledby="sectionHeading" data-testid="hse-html-details-section-links">
  <h2 id="sectionHeading" class="hse-u-font-size-32 hse-u-margin-bottom-3 hse-no-print">
    On this page
  </h2>
  <ul class="hse-list hse-no-print">
    <li key="#symptoms" class="hse-u-margin-bottom-3">
      <a href="#symptoms">Symptoms</a>
    </li>
    <li key="#getting-diagnosed/" class="hse-u-margin-bottom-3">
      <a href="#getting-diagnosed/">Getting diagnosed</a>
    </li>
    <li key="#treatment/" class="hse-u-margin-bottom-3">
      <a href="#treatment/">Treatments</a>
    </li>
  </ul>
</nav>

Nunjucks

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 page contents
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 code

{% from 'page-contents/macro.njk' import pageContents %}

        {{ pageContents({
          items: [{
              url: "#symptoms",
              title: "Symptoms"
            },
            {
              url: "#getting-diagnosed/",
              title: "Getting diagnosed"
            },
            {
              url: "#treatment/",
              title: "Treatments"
            }
          ]
        })}}

When to use page contents

Can be used on a html publications page to list what section are on the page

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

How to use a page contents

Add the title you want to use

Add the in page link items

Updated: August 2025