When to uses Breadcrumb ?
- When the user have to go through a lot of pages
- Showing the location of the current page in the navigational hierarchy
- Put information that is not used for navigation
Which variant of Breadcrumb should be used ?
Regular version
This one can insert for example at the top left of a page, it's purpose is really to help the user navigate within the different pages.
Bold version
This one can be used in the case of more complex navigation, through different item included in one page.
With an in component select
The ‘in component select’ component can be used to modify the value of an element in the breadcrumb trail by selecting another.
Use of icons
Each item can support an icon. The icon can be used only in specific case:
- Identify a product
- Identify a format (doc, attachments, …)
- Highlight a page
Do / Don’t
|
DO |
DON’T |
|---|---|
Only use one breadcrumb at a time in the page content. |
Don’t use too much breadcrumbs, keep it simple and organized. It shouldn’t be in the vertical position. |
|
DO |
DON’T |
|---|---|
Use a truncation when the text is longer than the max width to reduce the length of the breadcrumb |
Don’t display the item entirely if the text is really long |