Variants
Two weights are available : Regular and Bold, each have variants depending the needs and the situation.
The usage of icons is not recommended in every items. It could be used only for specific cases. The icon is fully customisable, its color/content can be changed but the associated text will not be affected and will keep the same color.
Regular
Item status :
|
|
Default |
Actual page |
Hover / Focus |
|---|---|---|---|
|
Without icons |
|
|
|
|
Icons without background |
|
|
|
|
Icon with background |
|
|
|
Regular : Collapsed
The « collapsed" variant can be used when there is not enough space to display all the items. It only show the user the two first and the two last pages of the breadcrumb. When the truncation is hovered, an item-list opens with the missing items. The maximum items to be displayed is set to 5 before using the “collapsed” variant.
Anatomy of the pop-in :
Behavior of an item inside the pop-in :
|
Default |
Hover / Focus |
|---|---|
|
|
Bold
In the bold version, a sub item can be add to the last item displayed. It is showed only here or when an item is hovered.
In addition, the last item of the bold variant can host a selection option :
Item status :
|
|
Default |
Actual page |
Hover / Focus |
|---|---|---|---|
|
Without icon |
|
|
|
|
Without sub item and without icon |
|
|
|
|
Icon without background |
|
|
|
|
Icon with background |
|
|
|
|
Without sub item |
|
|
|
Bold : Collapsed
The collapsed variant can be used when there is not enough space to display all the items, it only show the user the two first and the two last pages of the breadcrumb. When the truncation is hovered, an item-list opens with the missing items. The maximum items to be displayed is set to 5 before using the collapsed variant.
Behavior of an item inside the pop-in :
|
Default |
Hover / Focus |
|---|---|
|
|
|
With in component select
The in component select component can be applied to any element in the breadcrumb trail to modify its value and redirect the user.
|
Default |
|
|---|---|
|
Opened |
|
|
Hovered |
|
|
Selected |
|
Responsive Design
The maximum items must be displayed before the breadcrumb collapsed can vary depending on the screen width available.
Screen max-width
Based on Tailwind framework
2xl : 1536px
Maximum 5 items must be displayed before the breadcrumb collapse.
xl : 1280px
Maximum 4 items must be displayed before the breadcrumb collapse.
lg : 1024px / md : 768px
Maximum 3 items must be displayed before the breadcrumb collapse.
sm : 640px
Maximum 2 items must be displayed before the breadcrumb collapse.
