Nav open / close arrow

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

Last Updated

October 9, 2019

Coming soon...

Component code details are not currently available on this site, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.