Header

The header is the user’s primary way of accessing each part of a Sainsbury's product. A flexible framework has been created to cater for a range of different needs.

The header component offers navigation bars that can be used independently or together depending on requirements.

decomposition of header showing it's construction using a global, main, search and tab bars

Important information Each navigation bar is optional. When designing Sainsbury’s products, please consider the use case for each bar.

Global navigation bar

The global navigation bar enables quick access to other parts of the Sainsbury’s online ecosystem. The default height size of the global navigation bar is 36px.

small header bar with text links

Main navigation bar

The main navigation bar houses one of the Sainsburys’ Group logos and the top-level navigation items. The default height size of the main navigation bar is 80px and 64px on scroll.

large header bar with Sainsbury's logo

Search bar

The search bar enables the content to be found quick and easily. The default height size of the search bar is 56px.

search field with padding on a small header bar

Tab bar

The tab bar allows a large number of level 1 navigation items to be displayed on smaller screen sizes. The default height size of the tab bar is 48px.

nav items on a small header bar

Aligning elements

Elements can be aligned to the centre, left or right within the nav bars.

Centre aligned

When there is only one nav item it should be centre aligned.

text centered on header bar
Example of an inline text link centred on a Global Bar
logo centered on header
Example of a home logo centred on a Main Nav Bar
tab bar with centered content
Example of a home logo and nav items left aligned in a Main Nav Bar

Left and right aligned

Where items are unrelated, they should align to both the left and right within the nav bar.

header bar showing a text link aligned to the left of the bar
Example of a home logo and nav items left aligned in a Main Nav Bar
header bar showing icons and button aligned to the right of the bar
Example of a search field and nav items right aligned in a Main Nav Bar

Accessibility

The Luna header component supports text resize. When designing a header using the components, consider text scaling and test with large text sizes in the browser.

An accessible header will help all users to orient themselves and easily navigate through an app.

The header includes a skip link so that keyboard users can get to the main content quickly.

Use landmarks with ARIA-label to help screen reader users easily find and comprehend header elements such as multiple navigation bars. Find out more about landmarks in the structure section of our Layout guidance.

Skip links

Skip links provide screen reader and keyboard users a way of skipping repeat content such as navigation items.

The Luna header component provides a default 'skip to content' link with the option to add additional links. Skip links are visually hidden until they receive focus.

When using skip links:

  • Using just one skip link is usually sufficient

  • Limit the number of skip links to a maximum of three

  • Only add additional links for core or complex functionality that the user will want or need to use

  • Make sure each link points to an existing and unique ID on the same page

    header showing an example of an in focus skip link

Was this page helpful?