Skip to main content

The hat

The hat provides a global utility navigation for our websites. It's designed to hold three key website elements:

  1. Role
  2. Region
  3. Login

The hat will be applied to every website in our estate - providing a consistent signpost to global utility functions.

The hat


Usage guidelines


  • The hat must be at the top of the site on all pages
  • House global site functions
  • Show users the selections they have made and provide function to amend selections
  • Remain a consistent height of 48px. Height should not be increased for any reason
  • Design should remain consistent across every website
  • Only can utilise the hat for share price


  • No other content aside from role/region/login/share price should be shown in the hat



  • Tab style role select if there are two or less roles
  • Selected state should reflect user choice
  • When there are more than two roles the roles this will become a dropdown select list
  • Ability to change role selection by clicking on alternative tab or list item 
  • On selection of role a cookie is set to remember this preference


  • Dropdown select from a list
  • Selected state should reflect user choice
  • Ability to select from list and change region selection
  • Region selection can determine language
  • On selection of region a cookie is set to remember this preference


  • Primary button to enable users to login to online services
  • Button is an optional feature within the hat
  • If there is more than one system to choose from this will allow link to a page where the user can choose the correct system
  • If in a cookie a user has already chosed a login system the login button will show the system matched to the cookie