The site header contains key branding and the title of a website. It appears on every page.
About this pattern
The site header introduces wider site branding, such as the main colours in a site’s colour palette. It appears at the top of every page and can include an optional search field and primary site navigation.
On a mobile, site navigation is hidden from view until the user clicks or taps on a ‘menu’ button.
Other versions of this pattern
- Plain header
- Plain header with logo and site title
- Header with search
- Header with site navigation
- Header with search and site navigation
- Header with phase banner
Why we use this pattern
The site header helps a user quickly recognise a website, for example if they don’t come to a website via a homepage, or they have multiple tabs open and are switching back and forth between tabs.
We’ve avoided using second level interactive navigation because of usability concerns.
Analytics evidence from mygov.scot and gov.scot shows that users are familiar with the logo as a route to the homepage.
Users were also more likely to navigate to site sections of gov.scot using the site header’s primary navigation than using the same links on panels lower down the homepage.
The site header tracking is available for each of its components: Site search, site navigation and phase banner. In addition, the logo, title, skip navigation and expandable menu are trackable as follows:
Clicks to the title can be tracked through the original page path, the click URL, and a data attribute attached to the title text,
Clicks to the logo can be tracked through tracked through the original page path, the click URL, and a data attribute attached to the image,
data-header="header-logo". Where multiple logos exist, each should have a different logo-NAME data attribute.
“Skip to main content” can be tracked through the original page path, the click URL, and a data attribute attached to the link,
Clicks on the expandable menu can be tracked through the original page path, the click URL, and a data attribute attached to the icon,
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: email@example.com