Skip to main content
GOV.UK Components for Ruby on Rails

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" aria-hidden="true" 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" 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" href="/components/panel">Panel</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/table">Table</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" 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" aria-hidden="true" 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" href="/components/footer">Footer</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" 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" href="/components/table">Table</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" 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" aria-hidden="true" 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" href="/components/footer">Footer</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/header">Header</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" 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" href="/components/tag">Tag</a></li>
        </ul>
      </nav></div>
  </div>
</section>

Inverting the service navigation colour

Use inverse: true to render the service navigation component with white links on a blue background.

Input

= govuk_service_navigation(inverse: true,
                           service_name: 'An inverted service',
                           navigation_items: navigation_items,
                           current_path: "/components/header")
<%= govuk_service_navigation(inverse: true, service_name: 'An inverted service', navigation_items: navigation_items, current_path: "/components/header") %>
{ 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

An inverted service 
<section aria-label="Service information" class="govuk-service-navigation govuk-service-navigation--inverse" 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">An inverted 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="navigation" aria-hidden="true" hidden="hidden">Menu</button>
        <ul id="navigation" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" 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" href="/components/panel">Panel</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/table">Table</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/tag">Tag</a></li>
        </ul>
      </nav></div>
  </div>
</section>

Adding items to the start and end of the navigation

For extra customisation the service navigation can be assembled manually. We can use the navigation_start and navigation_end to add custom HTML at the beginning and end of the service navigation.

Input

= govuk_service_navigation(navigation_id: 'example-5') do |sn|
  - sn.with_navigation_start { tag.li('🌅', class: 'govuk-service-navigation__item') }
  - 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_navigation_end { tag.li('🌆', class: 'govuk-service-navigation__item') }
<%= govuk_service_navigation(navigation_id: 'example-5') do |sn|
sn.with_navigation_start { tag.li('🌅', class: 'govuk-service-navigation__item') }
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_navigation_end { tag.li('🌆', class: 'govuk-service-navigation__item') }
end %>

Output

A really great 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="#">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" aria-hidden="true" hidden="hidden">Menu</button>
        <ul id="example-5" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item">🌅</li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/footer">Footer</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/header">Header</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/panel">Panel</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" 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>
          <li class="govuk-service-navigation__item">🌆</li>
        </ul>
      </nav></div>
  </div>
</section>

Adding content above and below the service navigation

To add extra content above and below the service navigation use the content_before and content_after slots. This HTML will be unstyled, you must provide your own styles and JavaScript for the custom HTML.

Input

= govuk_service_navigation(navigation_id: 'example-6') do |sn|
  - sn.with_content_before { tag.p('Content above') }
  - 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_content_after { tag.p('Content below') }
<%= govuk_service_navigation(navigation_id: 'example-6') do |sn|
sn.with_content_before { tag.p('Content above') }
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_content_after { tag.p('Content below') }
end %>

Output

Content above

A really great service

Content below

<section aria-label="Service information" class="govuk-service-navigation" data-module="govuk-service-navigation">
  <div class="govuk-width-container">
    <p>Content above</p>
    <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-6" aria-hidden="true" hidden="hidden">Menu</button>
        <ul id="example-6" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/footer">Footer</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/header">Header</a></li>
        </ul>
      </nav></div>
    <p>Content below</p>
  </div>
</section>

Placing items on the right of the service navigation

If there’s enough space, you can render the content_after block on the right of the navigation by passing inline: true.

Input

= govuk_service_navigation(navigation_id: 'example-7', inline: true) do |sn|
  - 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_content_after { govuk_language_navigation(items:) }
<%= govuk_service_navigation(navigation_id: 'example-7', inline: true) do |sn|
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_content_after { govuk_language_navigation(items:) }
end %>
{
  items: [
    { text: 'English', lang: 'en', href: '#/en', current: true },
    { text: "Українська", lang: "uk", href: "#/uk" },
    { text: "Polski", lang: "pl", href: "#/pl" }
  ]
}

Output

A really great service 
<section aria-label="Service information" class="govuk-service-navigation" data-module="govuk-service-navigation">
  <div class="govuk-width-container govuk-service-navigation__inlining-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-7" aria-hidden="true" hidden="hidden">Menu</button>
        <ul id="example-7" class="govuk-service-navigation__list">
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/footer">Footer</a></li>
          <li class="govuk-service-navigation__item"><a class="govuk-service-navigation__link" href="/components/header">Header</a></li>
        </ul>
      </nav></div>
    <nav class="govuk-language-navigation" aria-label="language">
      <ul class="govuk-language-navigation__list">
        <li class="govuk-language-navigation__list-item"><span class="govuk-language-navigation__text" aria-current="true" lang="en">English</span></li>
        <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/uk" lang="uk" hreflang="uk" rel="alternate">Українська</a></li>
        <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/pl" lang="pl" hreflang="pl" rel="alternate">Polski</a></li>
      </ul>
    </nav></div>
</section>