Service Navigation example

Hide service name on mobile

On desktop, use the service_name link to show the name of the main page and allow users to navigate to it.

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.

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,
  navigation_items: [
    {
      text: "My service home",
      href: "/home"
    },
    {
      text: "Navigation item 1",
      href: "#"
    },
    {
      text: "Navigation item 2",
      href: "#"
    },
    {
      text: "Navigation item 3",
      href: "#"
    }
  ]
} %>