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.

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

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

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

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)

<%= render "govuk_publishing_components/components/cross_service_header", {
  show_account_layout: true,
  show_cross_service_header: true,
  product_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"
      }
    }
  }
} %>