Tab Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Tab

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

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.

Anatomy

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

‍

Best Practices

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.