Navigation - Curated hub navigation

Use the curated hub navigation to allow users to get from page to page in a curated hub.

Copy code

<div class="hse-related-nav">
  <h2 class="hse-related-nav__heading" id="more-in-diagnostic-tests-during-pregnancy">More in <a href="#">Diagnostic tests during pregnancy</a></h2>
  <ul class="hse-related-nav__list hse-related-nav__list--sub">
    <li class="hse-related-nav__item" aria-current="page">
      <span class="hse-related-nav__current">Why diagnostic tests are carried out in pregnancy</span>
    </li>
    <li class="hse-related-nav__item">
      <a class="hse-related-nav__link" href="#">Types of diagnostic tests in pregnancy</a>
    </li>
    <li class="hse-related-nav__item">
      <a class="hse-related-nav__link" href="#">Abnormal results</a>
    </li>
  </ul>
</div>

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 curated hub navigation
Name	Type	Required	Description
Name headingId	Type string	Required true	Description
Name heading	Type string	Required true	Description
Name headingUrl	Type string	Required true	Description
Name items	Type array	Required true	Description Array of curated navigation items objects.
Name items[].href	Type string	Required true	Description href value to use within each content list item label.
Name items[].text	Type string	Required true	Description Text to use within each content list item label.
Name items[].current	Type boolean	Required false	Description Set the current active page.

Copy code

{% from 'related-nav/macro.njk' import relatedNav %}

{{ relatedNav({
          headingId: "more-in-diagnostic-tests-during-pregnancy",
          heading: "Diagnostic tests during pregnancy",
          headingUrl: "#",
          items: [
            {
              href: "#",
              text: "Why diagnostic tests are carried out in pregnancy",
              current: "true"
            },
            {
              href: "#",
              text: "Types of diagnostic tests in pregnancy"
            },
            {
              href: "#",
              text: "Abnormal results"
            }
          ]
}) }}

When to use the curated hub navigation

The curated hub navigation is only used on hub content pages. They should not be used on:

main hub pages
content pages that are not grouped under a single subject

The curated hub navigation should only include links to pages grouped in the curated hub. It should not link to pages outside of the hub.

How to use the curated hub navigation

The sideways navigation should be:

at the bottom of a content page
after the date component
before the footer

This lets users read the content before giving them the ability to move on.

The component should have a H2 heading that says "More in ... ". For example, "More in vaccinations" on the COVID-19 vaccinations sub-topic.

The heading should be followed by a list of hyperlinks that take the user to each of the other child pages within the sub-topic.

For the page the user is currently on, the hyperlink should be removed to make the text the same colour as the body text on the page. A vertical border should be used to the left-hand side of this text as way of showing where a user currently is.

Once a user has viewed a page using the sideways navigation, the link should be styled as a visited link.

Research

The NHS found that users were confident using the sideways navigation. It allowed them to move sideways through related content, without interrupting their ability to evaluate if they were in the correct place for the information they needed.

Updated: September 2023