Header

The header sits at the top of an experience, and lets users navigate to different parts of your product. We use two types of headers – a web header for products hosted on the web and a native header for products hosted on iOS and Android.

How to use the header

The header makes the most important parts of your experience easy for users to find.

  • Always place it at the top of the page
  • Use the ARIA landmark role to help screen reader users find and understand the header and header navigation elements
  • The header component supports text resize, but you should still test with large text sizes in the browser

The header component offers navigation bars that you can adapt to suit lots of scenarios. You can use these navigation bars together or independently, depending on your user’s needs.

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

Each bar is optional

Remember that you don’t need to use every navigation bar. Think about the particular use case for each one, and if they suit your user’s requirements.

The global nav bar enables quick access to other Sainsbury’s brands. The default height size of the global nav bar is 36px.small header bar with text links

The main nav bar houses the most relevant Sainsbury’s Group logo for the context, and the top-level navigation items. The default height size of the main nav bar is 80px. When scrolling the sticky header is 64px.

large header bar with Sainsbury's logo

The search bar enables a user to search, so they can find content quickly 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 barThe skip link allows keyboard only and screen reader users to skip over repetitive content like menus. Otherwise, users have to tab through these on every page.

The skip link element will only be visible when it receives focus. It should be the first focusable element on the page.

header showing an example of an in focus skip link

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

You can create two groups of related items and align them to the left and right.

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

Elements for native

There are a number of different elements that make up our native header. You can use these elements together or independently, depending on your user’s needs.

Left icon

Use the left icon to show a back arrow when the screen is part of a journey. Do not include a left icon if the screen is not part of a journey.small header with left aligned icon

Title

Write a title that describes what the user is seeing. Aim to keep titles short and descriptive, 1 or 2 words should do the trick.small header with title text

Right icon

Use the right icon to show actions that make sense for the screen the user is seeing. For example, the right icon could be used for actions like:

  • See more
  • Share
  • Close (do not use if also using a back arrow as the left icon)
small header with right aligned icon

Left action

Use the left action when an icon doesn’t work for what you need to communicate. Choose an action that’s short, clear and intuitive to users.

small header with left aligned action

Right action

Use the right action when an icon doesn’t work for what you need to communicate. Choose an action that’s short, clear and intuitive to users.

small header with right aligned action

Naming elements

Choose a name that describes the icon or action as accurately as possible. Make sure that both design and development know the name of each icon and action.

A screen reader will read the elements from left to right. It will read each element like this:

  • Left icon = “(Accessible name) button”
  • Title = “(Accessible name) heading”
  • Right icon = “(Accessible name) action”
  • Left action = “(Accessible name) action”
  • Right action = “(Accessible name) button”
image showing the reading order of the elements

Copy guidelines

Labels in the header should start with a capital letter and be in sentence case, unless they are a brand name.

You can use an ampersand (&) in place of the word ‘and’ to reduce characters.


Was this page helpful?