Tabs let users easily move through related sections of content, showing one section at a time.

How to use tabs

Tabs are a useful way of letting users quickly switch between related information. They help by hiding sections of content which the user can choose to reveal.

When using tabs:

  • Only one option can be selected at a time
  • Once an option is selected, the results should display immediately
  • The first tab should be the most relevant to users
  • They should only be used for related information
  • Users should be able to complete tasks under each tab without having to jump back and forth between tabs

Types of tabs


  • Interactive demo - Sainsbury's


  • Interactive demo - Sainsbury's


  • Interactive demo - Sainsbury's


  • Interactive demo - Sainsbury's

Copy guidelines

  • Be clear in your labels about what content is in each section
  • Start your tab labels with a capital letter
  • Don’t use commas or any punctuation at the end of each label
  • Don’t use more than two words per label

Was this page helpful?

Get in touch

Our team can answer any questions about using tabs or give you a helping hand with your next project.
Select a theme to demo: