Tabs

figma:ready
scss:ready
vue:ready

Tabs allow the user to navigate from a content to another within the same context. It keeps the user on the same page.

Good to know

This is the default behaviour for a tab navigation. This pattern can be used on every breakpoint but you have to keep in mind that the user will have to swipe on the tab bar when it doesn't fit on screen.

Variations

Tabs can have two different alignments depending on the context you are using this pattern. You will be able to left align the tab bar to a container or center the tab bar on the full page width.

Aligned to a container

Full page width

Label length

Please know that your tab labels must be concise to be easily readable by the user and describe what is contained.

Without divider

Depending on the context, it is possible to remove the divider of the tabs. For example, when you have to use tabs in complex interfaces with many elements like dashboards.

Be aware

Keep in mind that tabs must be stacked with bottom elements when you remove the divider.

Specific behaviour

This navigation must be used when the device is not swipe compatible.

Do's and Don'ts

A tab bar must always have at least an active and an inactive tab.

Never use more than one active tab on a tab bar.