Styles
Using this Component
Breadcrumbs are used to display and enable navigation to the parent(s) of an object or page.
On Pages
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.
On References
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.
Structure
1. Parent(s)
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.
3. Dividers
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.
4. Icons
Each page in breadcrumbs is preceded with an icon to indicate its type (when relevant).
Behavior
Breadcrumbs are interactive components that allow for navigation to other referenced pages.
Clickable Area
Each item in the breadcrumbs is clickable as a navigational element. The dividers are not clickable.
Truncation
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.
Related Components
Playground Coming Soon!
Styles
Using this Component
Breadcrumbs are used to display and enable navigation to the parent(s) of an object or page.
On Pages
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.
On References
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.
Structure
1. Parent(s)
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.
3. Dividers
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.
4. Icons
Each page in breadcrumbs is preceded with an icon to indicate its type (when relevant).
Behavior
Breadcrumbs are interactive components that allow for navigation to other referenced pages.
Clickable Area
Each item in the breadcrumbs is clickable as a navigational element. The dividers are not clickable.
Truncation
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.