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

Breadcrumb

A breadcrumb is a navigational element that allows you to display the hierarchical paths structure of a page.

General guidelines

Use breadcrumbs to show pages that separate the Homepage from the current page. Along with showing users where they are, it allows them to quickly go back to a parent level or previous one.

Never use a breadcrumb to show the user’s path.

Breadcrumbs are only used for the hierarchical structure of a site; opt for the stepper for any other paths (e.g. for a marketing funnel). Due to its complementary role, a breadcrumb should never be integrated into the main content.

 

Breadcrumb1
Best practices
Good practice about the use of the breadcrumb.

The last element of the breadcrumb must always be the same as the current page’s title.

Bad practice about the use of the breadcrumb.

Don’t put various titles. Keep it consistent.

Good practice about the use of the breadcrumb.

Always use an expandable icon when there is more than three links in the breadcrumb.

Bad practice about the use of a long breadcrumb.

Don’t use too many links. It will break the layout and confuse the user.

Visual guidelines

Breadcrumbs are always located at the top left of the page, typically below the header bar.

The breadcrumb is displayed in the form of a line of text in which each page is a distinct link separated by an arrow. Each link should be separated by a “>“ to clearly show the chronology. The chronology must always be shown from left to right (the element furthest to the left must be the homepage) and the nearest the actual page.

Each element of the breadcrumb is a link and mirrors its characteristics.

Behaviours

When using more than 3 elements in the path, we recommend using a button at the second level to display the third, fourth and fifth level. This way, we can avoid long breadcrumbs on several lines.

Breadcrumb2

Visual variants

The Breadcrumb is using the standard interactive states (default, hover, active, focus). On a mobile device, use a back ghost button on the top left of the screen.

 

Breadcrumb3
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