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 allow you to navigate through different pages or sections that have the same context.


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.



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. 



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


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

Secondary Tabs
Main Tabs
Tabs Dark BG
Back to top