Header

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.

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.

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.

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

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

Navigation bars