Pages

Sub-hub page

Sub-hubs are lower-level menu pages. Users can access them through hub pages.

Whereas hub pages represent broader groupings of information, sub-hubs contain more closely connected groups of links. They are positioned lower down in the information architecture.

Open this example (Care plans) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-3">Care plans</h1>
    <p class="nhsuk-u-margin-bottom-5">
      Check plans you've agreed with your health team about how you want to be
      cared for
    </p>

<ol class="nhsapp-cards nhsapp-cards--stacked">
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Manage your health care plans
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>


<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
View your universal health care plan
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
</ol>
</div>
</div>


{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-3">Care plans</h1>
    <p class="nhsuk-u-margin-bottom-5">Check plans you've agreed with your health team about how you want to be cared for</p>

    {{ nhsappCardGroup({
      stacked: true,
      cards: [
        {
          title: 'Manage your health care plans',
          href: '#'
        },
        {
          title: 'View your universal health care plan',
          href: '#'
        }
      ]
    }) }}

  </div>
</div>

Structure of sub-hubs

Always include a back link at the top of sub-hubs. This allows users to return to the hub page they came from.

Main heading

This is the name of the sub-hub.

Descriptive text (optional)

You can use a brief description to give users more context about a sub-hub. We don’t include full stops at the end of this description, following a similar principle to the NHS service manual guidance on cards.

Section heading

Use section headings to break up card links into themes. It helps users to scan the information on the page more easily and reduces cognitive load. Research shows that people can be overwhelmed by long lists on NHS App pages.

Do not list more than 6 card links in a row without using a section heading.

Card links on a sub-hub should lead directly into a specific service or feature.

Do not create further menu pages that sit one level below a sub-hub. Research shows it can be frustrating for users if they need to navigate through multiple pages to find what they are looking for.

How to use sub-hubs

Use a sub-hub when you have evidence that grouping several links as a distinct category, one level below a hub page, would be helpful for users.

Before adding a new sub-hub, explore whether you could position the links on the hub page under a section heading instead.

Examples on the NHS App

Appointments

Open this example (Appointments) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-3">Upcoming and past appointments</h1>
    <p class="nhsuk-u-margin-bottom-5">
      View or manage upcoming and past appointments, referrals and waiting lists
    </p>

<ol class="nhsapp-cards nhsapp-cards--stacked">
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
GP surgery appointments
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>


<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Referrals
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>


<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a
href="#"
class="nhsapp-card__link nhsuk-link--no-visited-state"
aria-label="Hospital appointments, you have 1 new notification"
>
Hospital appointments
</a>
</div>


<p class="nhsapp-badge" aria-hidden="true">
<span class="nhsuk-u-visually-hidden">You have</span>


1


<span class="nhsuk-u-visually-hidden">notification</span>
</p>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>


<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Waiting list
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
</ol>
</div>
</div>


{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-3">Upcoming and past appointments</h1>
    <p class="nhsuk-u-margin-bottom-5">View or manage upcoming and past appointments, referrals and waiting lists</p>

    {{ nhsappCardGroup({
      stacked: true,
      cards: [
        {
          title: 'GP surgery appointments',
          href: '#'
        },
        {
          title: 'Referrals',
          href: '#'
        },
        {
          title: 'Hospital appointments',
          href: '#',
          linkAriaLabel: 'Hospital appointments, you have 1 new notification',
          badgeLarge: {
            count: 1,
            label: 'notification',
            ariaHidden: true
          }
        },
        {
          title: 'Waiting list',
          href: '#'
        }
      ]
    }) }}

  </div>
</div>

Prescriptions

Open this example (Prescriptions) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-3">View and manage prescriptions</h1>
    <p class="nhsuk-u-margin-bottom-5">
      Check your prescriptions and choose the pharmacy they are collected or
      delivered from
    </p>

<ol class="nhsapp-cards nhsapp-cards--stacked">
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a
href="/pages/your-health/requested-medicines"
class="nhsapp-card__link nhsuk-link--no-visited-state"
>
Requested medicines
</a>
<div class="nhsapp-card__below">
<p class="nhsuk-u-margin-top-1">
Check if your GP has approved the medicines you requested in the
app
</p>
</div>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>


<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a
href="/pages/your-health/your-approved-prescriptions"
class="nhsapp-card__link nhsuk-link--no-visited-state"
>
Check if your prescriptions are ready
</a>
<div class="nhsapp-card__below">
<p class="nhsuk-u-margin-top-1">
View prescriptions being prepared by the pharmacy
</p>
</div>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>


<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Choose a pharmacy
</a>
<div class="nhsapp-card__below">
<p class="nhsuk-u-margin-top-1">
Choose or change a pharmacy for your prescriptions to be
collected or delivered from
</p>
</div>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>


<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Hospital and other medicines
</a>
<div class="nhsapp-card__below">
<p class="nhsuk-u-margin-top-1">
View your current and past medicines
</p>
</div>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
</ol>
</div>
</div>


{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-3">View and manage prescriptions</h1>
    <p class="nhsuk-u-margin-bottom-5">Check your prescriptions and choose the pharmacy they are collected or delivered from</p>

    {{ nhsappCardGroup({
      stacked: true,
      cards: [
        {
          title: "Requested medicines",
          description: "Check if your GP has approved the medicines you requested in the app",
          href: "/pages/your-health/requested-medicines"
        },
        {
          title: "Check if your prescriptions are ready",
          description: "View prescriptions being prepared by the pharmacy",
          href: "/pages/your-health/your-approved-prescriptions"
        },
        {
          title: "Choose a pharmacy",
          description: "Choose or change a pharmacy for your prescriptions to be collected or delivered from",
          href: "#"
        },
        {
          title: "Hospital and other medicines",
          description: "View your current and past medicines",
          href: "#"
        }
      ]
    })}}

  </div>
</div>

Help improve this pattern

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone.

Discuss 'Sub-hub page' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.