Airbus uses cookies (including from third parties) to enhance site navigation and offer you useful features by analysing the site usage. By clicking “accept”, you agree to the use of cookies. For further information, please refer to our cookies policy. Accept

Tab

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

General guidelines

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

Tab1
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.
Visual guidelines

Sizes

AppearanceTwo types of tabs exist in 3 different sizes (M, L and XL) on light backgrounds and on dark backgrounds.

Tab2

Behaviours

A tab has several interactive states (Default, Hover, Active, Focus, Disable).

On a mobile device, use a back ghost button on the top left of the screen.

Tab3
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top