Service navigation

Service navigation helps users understand that they’re using your service and lets them navigate around your service.

With only a service name

The Design System recommendation is to display the service name in the service navigation instead of in the header. On basic services this means the service navigation can be rendered without any navigation links.

Input

= govuk_service_navigation(service_name: "My new service", service_url: "#")

<%= govuk_service_navigation(service_name: "My new service", service_url: "#") %>

Output

My new service

<section aria-label="Service information" class="govuk-service-navigation" data-module="govuk-service-navigation">
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <span class="govuk-service-navigation__service-name">
        <a class="govuk-service-navigation__link" href="#">
          My new service
        </a>
      </span>
    </div>
  </div>
</section>

With navigation items

Show navigation links to let users navigate to different parts of your service and find useful links and tools.

When you are on the linked page you can use current: true to mark it. If you’re on a page within the section but not on the page itself, use active: true instead.

Input

= govuk_service_navigation(service_name: "My new service",
                           navigation_items: navigation_items,
                           navigation_id: 'example-2')

<%= govuk_service_navigation(service_name: "My new service", navigation_items: navigation_items, navigation_id: 'example-2') %>

{ navigation_items: [
  { text: "Footer",   href: "/components/footer" },
  { text: "Header",   href: "/components/header", current: true },
  { text: "Panel", href: "/components/panel" },
  { text: "Table", href: "/components/table" },
  { text: "Tag",  href: "/components/tag" }
] }

Output

My new service

<section aria-label="Service information" class="govuk-service-navigation" data-module="govuk-service-navigation">
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <span class="govuk-service-navigation__service-name">
        <span class="govuk-service-navigation__text">
          My new service
        </span>
      </span>
      <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
        <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="example-2" hidden="hidden">
          Menu
        </button>
        <ul id="example-2" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/footer">
              Footer
            </a>
          </li>
          <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
            <strong class="govuk-service-navigation__active-fallback">
              <a class="govuk-service-navigation__link" aria-current="page" href="/components/header">
                Header
              </a>
            </strong>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/panel">
              Panel
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/table">
              Table
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/tag">
              Tag
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</section>

Automatically detecting the current page

Having to work out which page is current and adjust the parameters manually would be complicated. If you pass in the current_path, when navigation nodes that have a matching href are rendered, they’ll be rendered as the current page.

Input

= govuk_service_navigation(service_name: "My new service",
                           current_path: "/components/panel",
                           navigation_items: navigation_items,
                           navigation_id: 'example-3')

<%= govuk_service_navigation(service_name: "My new service", current_path: "/components/panel", navigation_items: navigation_items, navigation_id: 'example-3') %>

{ navigation_items: [
  { text: "Footer",   href: "/components/footer" },
  { text: "Header",   href: "/components/header" },
  { text: "Panel", href: "/components/panel" },
  { text: "Table",  href: "/components/table" },
  { text: "Tag",  href: "/components/tag" }
] }

Output

My new service

<section aria-label="Service information" class="govuk-service-navigation" data-module="govuk-service-navigation">
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <span class="govuk-service-navigation__service-name">
        <span class="govuk-service-navigation__text">
          My new service
        </span>
      </span>
      <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
        <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="example-3" hidden="hidden">
          Menu
        </button>
        <ul id="example-3" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/footer">
              Footer
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/header">
              Header
            </a>
          </li>
          <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
            <strong class="govuk-service-navigation__active-fallback">
              <a class="govuk-service-navigation__link" aria-current="page" href="/components/panel">
                Panel
              </a>
            </strong>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/table">
              Table
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/tag">
              Tag
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</section>

Automatic active page matching

Often we have pages deeply nested within sections of the site and want the navigation to show which section we’re currently in. We can do this using active_when.

When active_when is a string the component will check if the beginning of the current_path matches it. For more complex scenarios a regular expression can be used instead.

Input

= govuk_service_navigation(service_name: "My new service",
                           current_path: "/components/table/dining/extendable",
                           navigation_items: navigation_items,
                           navigation_id: 'example-4')

<%= govuk_service_navigation(service_name: "My new service", current_path: "/components/table/dining/extendable", navigation_items: navigation_items, navigation_id: 'example-4') %>

{ navigation_items: [
  { text: "Footer",   href: "/components/footer", active_when: "/components/footer" },
  { text: "Header",   href: "/components/header", active_when: "/components/header" },
  { text: "Panel", href: "/components/panel", active_when: "/components/panel" },
  { text: "Table",  href: "/components/table", active_when: "/components/table" },
  { text: "Tag",  href: "/components/tag", active_when: "/components/tag" }
] }

Output

My new service

<section aria-label="Service information" class="govuk-service-navigation" data-module="govuk-service-navigation">
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <span class="govuk-service-navigation__service-name">
        <span class="govuk-service-navigation__text">
          My new service
        </span>
      </span>
      <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
        <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="example-4" hidden="hidden">
          Menu
        </button>
        <ul id="example-4" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/footer">
              Footer
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/header">
              Header
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/panel">
              Panel
            </a>
          </li>
          <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
            <strong class="govuk-service-navigation__active-fallback">
              <a class="govuk-service-navigation__link" aria-current="true" href="/components/table">
                Table
              </a>
            </strong>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/tag">
              Tag
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</section>

Manually building the service navigation

For extra customisation the service navigation can be assembled manually. We can use the start_slot and end_slot to add custom HTML at the beginning and end of the service navigation. This content needs its own custom styling or it will be rendered above and below the other content.

Input

= govuk_service_navigation(navigation_id: 'example-5', classes: 'app-service-navigation') do |sn|
  = sn.with_start_slot { '🌅' }
  = sn.with_service_name(service_name: 'A really great service', service_url: '#')
  = sn.with_navigation_item(text: "Footer", href: "/components/footer")
  = sn.with_navigation_item(text: "Header", href: "/components/header")
  = sn.with_navigation_item(text: "Panel", href: "/components/panel")
  = sn.with_navigation_item(text: "Table", href: "/components/table")
  = sn.with_navigation_item(text: "Tag", href: "/components/tag", active: true)
  = sn.with_end_slot { '🌆' }

<%= govuk_service_navigation(navigation_id: 'example-5', classes: 'app-service-navigation') do |sn|
 %>
<%= sn.with_start_slot { '🌅' } %>
<%= sn.with_service_name(service_name: 'A really great service', service_url: '#') %>
<%= sn.with_navigation_item(text: "Footer", href: "/components/footer") %>
<%= sn.with_navigation_item(text: "Header", href: "/components/header") %>
<%= sn.with_navigation_item(text: "Panel", href: "/components/panel") %>
<%= sn.with_navigation_item(text: "Table", href: "/components/table") %>
<%= sn.with_navigation_item(text: "Tag", href: "/components/tag", active: true) %>
<%= sn.with_end_slot { '🌆' } %>
<% end %>

Output

🌅

A really great service

🌆

<section aria-label="Service information" class="govuk-service-navigation app-service-navigation" data-module="govuk-service-navigation">
  <div class="govuk-width-container">
    🌅
    <div class="govuk-service-navigation__container">
      <span class="govuk-service-navigation__service-name">
        <a class="govuk-service-navigation__link" href="#">
          A really great service
        </a>
      </span>
      <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
        <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="example-5" hidden="hidden">
          Menu
        </button>
        <ul id="example-5" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/footer">
              Footer
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/header">
              Header
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/panel">
              Panel
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a class="govuk-service-navigation__link" aria-current="true" href="/components/table">
              Table
            </a>
          </li>
          <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
            <strong class="govuk-service-navigation__active-fallback">
              <a class="govuk-service-navigation__link" aria-current="true" href="/components/tag">
                Tag
              </a>
            </strong>
          </li>
        </ul>
      </nav>
    </div>
    🌆
  </div>
</section>