Use tabs to allow users to navigate easily between views within the same context.
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. They allow users to see different views without actually leaving the page. Mostly a tab bar contains at least two tab components and one of them is always active.
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.
- Label: Shows the context of the tab view.
- Indicator line: Shows which view is active and groups several tabs under one hood.
- 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.
- 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.
- Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
- 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.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.