Use tabs to allow users to navigate easily and alternate between categories within the same catalogue.

When to use

Used when is necessary divide or separate products in categories and there is more than one categories in a product catalogue. Also when we add more categories to catalogue. e.g. Promotions, recommended, etc.

When don't use

If product catalogue is limited and don't exceed 20 products.

Main elements

Tab label

  • Each tab label describes the content contained within it.
  • Labels are concise and use no more than two words.
  • The character length of a label will impact the experience.

Number of tabs

  • In most scenarios you should use a limit number of tabs. This maintains an uncluttered UI and reduces cognitive load for users.


  • Tab order should be consistent across an experience and show at begin promotions, recomendes or frequently orders. Tabs with related content should be grouped adjacent to each other.



Tabs allows two states: active & inactive.

Did this page help you?