Tab

When to use

• When you want to show different views for different content that lie under same context.
• When the user is inside a journey (e.g. form or settings) use tabs to organise related content without letting the user leave the main page.

Anatomy

1. Label: Shows the context of the tab view.
2. Indicator line: Shows which view is active and groups several tabs under one hood.

Best Practices

1. Each tab label describes the content contained within it. Labels are concise and use no more than two words. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience.
2. In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If more than six tabs are needed, consider other navigation patterns, such as a side-nav.
3. Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
4. If the non-highlighted tabs are faded too much into the background, there's a risk that users will never click them and never discover the many hidden features.