Use the primary Tab to navigate among various sections (e.g.: to navigate between the different main pages of an application).
Use the secondary Tab to navigate within sections having the same content (e.g.: in a Card to change from a visual image to raw data in a table).
- Always indicate to users where they are by using the active mode of the Tab.
- Always preselect the first tab from the Home page.
- Use only two minimum to a maximum of six Tabs.
- Place the Tabs in a logical order for the user or in relation to the company environment/business sector.
- A tab selection is always exclusive. In the case of a staged process, opt for the Stepper element.
- Use short and clear labels (no more than two words) and no longer than two lines of text. If there is too much content, use a tooltip to provide more detailed information.
Tabs may be placed in the header as the main navigation between the pages of an application. They may also be place in a Card as secondary navigation in a similar context. It is generally placed at the top of the page or section, so as to always let users know where they are.