Breadcrumb Navigation component
The Breadcrumb component helps the user to track where they are in the application. You can only use this component if the pages are opened with a page cache.
The Breadcrumb component lists the pages, in the order they were opened (chronologically). Each element is clickable, and the user can navigate to those pages. Pages cached like this, will also store their state, so when the user navigates back to it through the Breadcrumb component it will be the same(for example, the scrollbar, the state and contents of the components will be the same).
Please note, if you refresh the URL, the breadcrumb will be empty!
Supported events:
Show, Hide, Animations, MouseEvents, Scroll, Drag&Drop
Style customization
| Name | Default value | Derived value | Computed value | Comment |
|---|---|---|---|---|
| $breadcrumb-font-size | null | - | - | Breadcrumb menu font size |
| $breadcrumb-padding-y | 0.75rem | - | - | Vertical spacing |
| $breadcrumb-padding-x | 1rem | - | - | Horizontal spacing |
| $breadcrumb-item-padding | 0.5rem | - | - | Breadcrumb item padding |
| $breadcrumb-margin-bottom | 1rem | - | - | Bottom margin |
| $breadcrumb-bg | $gray-200 | $breadcrumb-bg-->$gray-200-->#e9ecef | #e9ecef | Breadcrumb background color |
| $breadcrumb-divider-color | $gray-600 | $breadcrumb-divider-color-->$gray-600-->#6c757d | #6c757d | Divider color |
| $breadcrumb-active-color | $gray-600 | $breadcrumb-active-color-->$gray-600-->#6c757d | #6c757d | Active color |
| $breadcrumb-divider | quote("/") | - | quote("/") | Divider type |
| $breadcrumb-border-radius | $border-radius | $breadcrumb-border-radius-->$border-radius-->0.25rem | 0.25rem | Breadcrumb menu border radius |