In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Tabs

Tabs allow you to navigate through different pages or sections that have the same context.

Usage
Tabs

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). 

 

Best practices

- 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.

 

Placement

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. 

Visual

Appearance

Two types of tabs exist: primary tabs and secondary tabs.

Behavior

The tabs have three distinct behaviors: selected, hover and inactive.

Secondary Tabs
Main Tabs
Tabs Dark BG
Back to top