Service Navigation example

Hide service name on mobile

Hides the first item in navigation_items on desktop. The first item should be replaced on desktop with the service_name link. This link is then hidden on mobile.

On mobile, use the toggle_text to show the name of the main page, but allow users to navigate to it with the first link in the navigation_items, which is hidden on desktop.

This is intended to prevent the repetition of ‘Menu’ options within the Service navigation component and the site header, and the duplication of the service name on mobile.

How it looks (preview)

My service home

How to call this example

<%= render "govuk_publishing_components/components/service_navigation", {
  service_name: "My service home",
  service_name_url: "/home",
  hide_service_name_on_mobile: true,
  toggle_text: "My service",
  navigation_items: [
    {
      text: "My service home",
      href: "/home"
    },
    {
      text: "Navigation item 1",
      href: "#"
    },
    {
      text: "Navigation item 2",
      href: "#"
    },
    {
      text: "Navigation item 3",
      href: "#"
    }
  ]
} %>