Secondary navigation

These examples are used for automated tests and may not follow service manual best practice.

Secondary navigation default

Open this example in a new tab: Secondary navigation default

Code

Markup

<nav class="nhsuk-secondary-navigation"  data-module="nhsuk-secondary-navigation" aria-label="Secondary navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">All clinics</a>
    </li>

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <a class="nhsuk-secondary-navigation__link" href="#" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Today</strong></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Upcoming</a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Completed</a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  items: [
    {
      href: "#",
      text: "All clinics"
    },
    {
      href: "#",
      text: "Today",
      current: true
    },
    {
      href: "#",
      text: "Upcoming"
    },
    {
      href: "#",
      text: "Completed"
    }
  ]
}) }}

Secondary navigation reverse

Open this example in a new tab: Secondary navigation reverse

Code

Markup

<nav class="nhsuk-secondary-navigation nhsuk-secondary-navigation--reverse"  data-module="nhsuk-secondary-navigation" aria-label="Secondary navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">All clinics</a>
    </li>

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <a class="nhsuk-secondary-navigation__link" href="#" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Today</strong></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Upcoming</a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Completed</a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  classes: "nhsuk-secondary-navigation--reverse",
  items: [
    {
      href: "#",
      text: "All clinics"
    },
    {
      href: "#",
      text: "Today",
      current: true
    },
    {
      href: "#",
      text: "Upcoming"
    },
    {
      href: "#",
      text: "Completed"
    }
  ]
}) }}

Secondary navigation reverse with count

Open this example in a new tab: Secondary navigation reverse with count

Code

Markup

<nav class="nhsuk-secondary-navigation nhsuk-secondary-navigation--reverse"  data-module="nhsuk-secondary-navigation" aria-label="Secondary navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">All<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>12</span></a>
    </li>

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <a class="nhsuk-secondary-navigation__link" href="#" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Today<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>3</span></strong></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Upcoming<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>9</span></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Completed<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>0</span></a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  classes: "nhsuk-secondary-navigation--reverse",
  items: [
    {
      href: "#",
      text: "All",
      count: 12
    },
    {
      href: "#",
      text: "Today",
      count: 3,
      current: true
    },
    {
      href: "#",
      text: "Upcoming",
      count: 9
    },
    {
      href: "#",
      text: "Completed",
      count: 0
    }
  ]
}) }}

Secondary navigation vertical

Open this example in a new tab: Secondary navigation vertical

Code

Markup

<nav class="nhsuk-secondary-navigation nhsuk-secondary-navigation--vertical"  data-module="nhsuk-secondary-navigation" aria-label="Secondary navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">All clinics</a>
    </li>

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <a class="nhsuk-secondary-navigation__link" href="#" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Today</strong></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Upcoming</a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Completed</a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  vertical: true,
  items: [
    {
      href: "#",
      text: "All clinics"
    },
    {
      href: "#",
      text: "Today",
      current: true
    },
    {
      href: "#",
      text: "Upcoming"
    },
    {
      href: "#",
      text: "Completed"
    }
  ]
}) }}

Secondary navigation with count

Open this example in a new tab: Secondary navigation with count

Code

Markup

<nav class="nhsuk-secondary-navigation"  data-module="nhsuk-secondary-navigation" aria-label="Secondary navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">All<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>12</span></a>
    </li>

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <a class="nhsuk-secondary-navigation__link" href="#" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Today<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>3</span></strong></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Upcoming<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>New</span></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Completed<span class="nhsuk-secondary-navigation__count"><span class="nhsuk-u-visually-hidden">Count: </span>0</span></a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  items: [
    {
      href: "#",
      text: "All",
      count: 12
    },
    {
      href: "#",
      text: "Today",
      count: 3,
      current: true
    },
    {
      href: "#",
      text: "Upcoming",
      count: "New"
    },
    {
      href: "#",
      text: "Completed",
      count: 0
    }
  ]
}) }}

Secondary navigation with custom label

Open this example in a new tab: Secondary navigation with custom label

Code

Markup

<nav class="nhsuk-secondary-navigation"  data-module="nhsuk-secondary-navigation" aria-label="Section navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <a class="nhsuk-secondary-navigation__link" href="#" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Summary</strong></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">History</a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Documents</a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  label: "Section navigation",
  items: [
    {
      href: "#",
      text: "Summary",
      current: true
    },
    {
      href: "#",
      text: "History"
    },
    {
      href: "#",
      text: "Documents"
    }
  ]
}) }}

Secondary navigation with html

Open this example in a new tab: Secondary navigation with html

Code

Markup

<nav class="nhsuk-secondary-navigation"  data-module="nhsuk-secondary-navigation" aria-label="Secondary navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Overview</a>
    </li>

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <a class="nhsuk-secondary-navigation__link" href="#" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Vaccinations<span class="nhsuk-u-visually-hidden"> </span><strong class="nhsuk-tag nhsuk-tag--green nhsuk-u-margin-left-2">New</strong></strong></a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Consent</a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  items: [
    {
      href: "#",
      html: "Overview"
    },
    {
      href: "#",
      html: 'Vaccinations<span class="nhsuk-u-visually-hidden"> </span><strong class="nhsuk-tag nhsuk-tag--green nhsuk-u-margin-left-2">New</strong>',
      current: true
    },
    {
      href: "#",
      html: "Consent"
    }
  ]
}) }}

Secondary navigation with unlinked current item

Open this example in a new tab: Secondary navigation with unlinked current item

Code

Markup

<nav class="nhsuk-secondary-navigation"  data-module="nhsuk-secondary-navigation" aria-label="Secondary navigation">
  <ul class="nhsuk-secondary-navigation__list">

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">All clinics</a>
    </li>

    <li class="nhsuk-secondary-navigation__item nhsuk-secondary-navigation__item--current">
      <span class="nhsuk-secondary-navigation__text" aria-current="page"><strong class="nhsuk-secondary-navigation__current">Today</strong></span>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Upcoming</a>
    </li>

    <li class="nhsuk-secondary-navigation__item">
      <a class="nhsuk-secondary-navigation__link" href="#">Completed</a>
    </li>
  </ul>
</nav>

Macro

{% from "secondary-navigation/macro.njk" import secondaryNavigation -%}

{{ secondaryNavigation({
  items: [
    {
      href: "#",
      text: "All clinics"
    },
    {
      text: "Today",
      current: true
    },
    {
      href: "#",
      text: "Upcoming"
    },
    {
      href: "#",
      text: "Completed"
    }
  ]
}) }}