Component

Cross service header

The One Login header contains two distinct navigation menus - one for GOV.UK One Login links and another for internal service navigation, which uses the Design System service navigation component.

On smaller screens, both menus collapse and can be shown and hidden using Javascript.

You’ll need to adapt the internal service navigation so that it includes content specific to your service. This includes adapting the accessibility markup in the internal service navigation.

GOV.UK One Login links in the header

The header contains two links:

• “GOV.UK One Login”: this takes the user to their One Login ‘home’ area, where they can manage their credentials and see and access the services they’ve used - you don’t need to update the url this points to
• “Sign out”: you’ll need to adapt this link so that it signs the user out of your service and signs them out of One Login - how you do this will depend on how you’ve implemented sign out functionality in your service

Internal service navigation links in the header

The header has space to optionally add links to different parts of your service, just as the current ‘service header’ component from the Design System does. Follow the same patterns for internal service navigation links as you do with the Design System service header.

Please refer to the One Login Service Header GitHub repo for further information

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

GOV.UK email subscriptions

How to call this component

<%= render "govuk_publishing_components/components/cross_service_header", {
  show_account_layout: true,
  show_cross_service_header: true,
  service_name: "GOV.UK email subscriptions",
  one_login_navigation_items: {
    one_login_home: {
      href: "#"
    },
    one_login_sign_out: {
      text: "Sign out"
    }
  }
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

• Service-navigation

Accessibility acceptance criteria

Links in the component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when they have focus
• change in appearance when touched (in the touch-down state)
• change in appearance when hovered
• be usable with touch
• be usable with voice commands
• have visible text
• have meaningful text

Other examples

With data attributes (preview)

GOV.UK email subscriptions

<%= render "govuk_publishing_components/components/cross_service_header", {
  show_account_layout: true,
  show_cross_service_header: true,
  service_name: "GOV.UK email subscriptions",
  one_login_navigation_items: {
    one_login_home: {
      href: "#",
      data: {
        module: "explicit-cross-domain-links"
      }
    },
    one_login_sign_out: {
      text: "Sign out",
      data: {
        module: "explicit-cross-domain-links"
      }
    }
  }
} %>

With service navigation links (preview)

The header has space to optionally add links to different parts of your service, just as the current ‘service header’ component from the Design System does. Follow the same patterns for internal service navigation links as you do with the Design System service header.

GOV.UK email subscriptions

<%= render "govuk_publishing_components/components/cross_service_header", {
  show_account_layout: true,
  show_cross_service_header: true,
  service_name: "GOV.UK email subscriptions",
  one_login_navigation_items: {
    one_login_home: {
      href: "#",
      data: {
        module: "explicit-cross-domain-links"
      }
    },
    one_login_sign_out: {
      text: "Sign out",
      data: {
        module: "explicit-cross-domain-links"
      }
    }
  },
  service_navigation_items: [
    {
      text: "Example link 1",
      href: "#"
    },
    {
      text: "Example link 2",
      href: "#"
    },
    {
      text: "Example link 3",
      href: "#"
    }
  ]
} %>