Breadcrumb
Also known as: Breadcrumb trail, Page location
Resources
Properties
| Property | Values | Default |
|---|---|---|
State Variant | Default | Hover | Focus | Default |
Is current page Boolean | true | false | false |
Has icon Boolean | true | false | false |
Icon InstanceSwap | Any icon | heart |
Has label Boolean | true | false | true |
Label Text | string | Page 1 |
Overflow
To handle long navigation paths, breadcrumb component truncates middle items with an ellipsis. Hovering over this ellipsis reveals a dropdown, allowing users to access and navigate through the hidden pages.
| Property | Values | Default |
|---|---|---|
Has overflow Boolean | true | false | false |
Swap content InstanceSwap | Any component | Placeholder |
When to use
Breadcrumb navigation allows users to navigate back to previous page levels.
When the main navigation already provides sufficient context for navigation.
Size
Dimensions of the breadcrumb are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
scale.css
--scale-width-<size>
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>