Using this Component
Breadcrumbs are used to display and enable navigation to the parent(s) of an object or page.
Breadcrumbs should be displayed above the UIPageHeader of any page that has parent page(s). They may be omitted for pages that do not have a parent.
When the parents of a referenced page are important for understanding that reference, breadcrumbs may be placed above the page reference. This is not required, and should only be done when necessary.
Parents display from left-to-right in order of increasing specificity in describing the page’s location.
2. Active Page
The current page is displayed in bold at the end of the breadcrumbs. This is standard for page-level breadcrumbs, but is not necessary when breadcrumbs are used in other scenarios.
Parents in breadcrumbs are separated with dividers. The standard divider is the icon ficon-angle-right. When describing file paths with specific syntaxes, alternatives such as “/” or “.” may be used when they are contextually appropriate.
Each page in breadcrumbs is preceded with an icon to indicate its type (when relevant).
Breadcrumbs are interactive components that allow for navigation to other referenced pages.
Each item in the breadcrumbs is clickable as a navigational element. The dividers are not clickable.
When horizontal space is restricted and the full breadcrumbs can’t be displayed, parent(s) are truncated within an ellipsis “…” which displays the truncated items within a peek.
Component code details for this component are not currently available, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.
To add breadcrumbs to your page you will need to use the AlationBreadcrumbs wrapper component. See codepath and example code below for more details.