Anatomy
|
Item |
Name |
Description |
Optional |
|---|---|---|---|
|
1 |
Breadcrumb Item (Past) |
Clickable element representing a previous level in the page hierarchy. |
|
|
2 |
Breadcrumb Item (Current) |
Displays the name of the page the user is currently on. |
|
|
3 |
Separator |
Visual marker that separates Breadcrumb items. |
|
|
4 |
Ellipsis Buton |
Button that indicates additional hidden pages, used when there are 4 or more levels on Desktop and from 2 levels on Mobile. |
|
|
5 |
Subtitle |
Optional element indicating the current page subtitle, if applicable. |
Yes |
Specification and properties
Spacing
|
Element |
Property |
Value |
Token |
|---|---|---|---|
|
Breadcrumbs |
Gap |
4px |
spacing.50 |
|
Breadcrumb Item |
Horizontal Padding |
8px |
spacing.100 |
States
Only Past Breadcrumb items are interactive. The Current item represents the page title and is always static.
|
Item |
State |
Description |
|---|---|---|
|
1 |
Default |
The initial state of the item. It represents its default appearance before any interaction takes place. |
|
2 |
Hover |
The state that is displayed when a user hovers the cursor over the item, indicating the component is interactive. |
Text
We use the H1 in the Current Breadcrumb item to semantically represent the page title, ensuring clean and accessible code.
|
Item |
Variant |
Token |
Semantic element |
|---|---|---|---|
|
1 |
Current |
title.large-strong |
<h1> |
|
2 |
Past |
title.large |
<a> |