Tabs
A navigation component that can help the user freely
explore and switch between different sections of a given screen.
Use Cases
- When a screen has multiple sections that users must navigate and manipulate in a non-linear way, allowing them to go back and forth as needed.
HTML
Do's & Dont's
Use it for Contextual, non-linear
navigation
The use of tabs must be considered whenever sections of a specific
page contain a lot of information that must be shown on the main
section of the screen.
In terms of navigation hierarchy, a set of tabs must be considered below more general navigation components (Headers, Breadcrumbs) and major containers (such as accordions or Offcanvas).
In terms of navigation hierarchy, a set of tabs must be considered below more general navigation components (Headers, Breadcrumbs) and major containers (such as accordions or Offcanvas).
Assess the contents, then use it
It is advised to assess the amount of contents that each section
will contain before choosing to use a set of Tabs as a navigation
control: Depending on the type of content you can also decide how to
group the information, and depending on the amount of content you
can decide how many sections the screen will show.
Avoid long section titles
Remember, as a general practice, to be consistent, clear and short
when naming the sections of your Tabs. This could be difficult based
on the amount and type of content and that is why the previous
assessment must be comprehensive.
Alternative and Related components
