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

September 14, 2020

Coming soon...

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.

Eng Description

To add breadcrumbs to your page you will need to use the AlationBreadcrumbs wrapper component. See codepath and example code below for more details.

Code Path & Props

alation/views/AlationBreadcrumbs
Up to date props can be found at the codepath above.

Example Code