Breadcrumbs

Interactive Example

Breadcrumbs provide a user with their current site location and allows them to quickly navigate to a parent page or previous step.

Rules of Thumb

Don’t use Breadcrumbs as a replacement for the primary navigation.
A Breadcrumb item label should match the page title that they link with.

Appearance and Behavior

Breadcrumbs should be positioned in the top portion of a page, ideally below the application bar and primary navigation and above the page title (if present).

Each Breadcrumb item is comprised of a clickable page link followed by a dividing icon. However, the final Breadcrumb, representing the current page, has a static text label and no divider.

Breadcrumb links should be styled in the Astro-defined primary interactive color. Breadcrumb items that are hovered over should be styled in the interactive hover color and have no underline. The last current page Breadcrumb item should not be interactive and should be styled as the primary text color.

When used in applications intended for large monitors, Breadcrumb trails should span no more than half of the parent window’s width, beyond which label truncation or line wrapping should be used.

While presenting a single non-interactive Breadcrumb on a homepage is relatively uncommon, it is a permitted option.

Examples

Do: Show active links on previous/parent pages. The current page is not active or clickable.

Don’t: Show the current page as an active link or with a divider to its right. — **Don’t**: Show the current page as an active link or with a divider to its right.

Do: Hovering over Breadcrumbs changes the interactive color to hover.

Don’t: Display hovered Breadcrumbs with an underline. — **Don’t**: Display hovered Breadcrumbs with an underline.

Do: When using icons in the item label make sure to include a label with the icon. The exception to this is a home icon at the beginning of the Breadcrumb list.

Don’t: Only use icons to identify separate Breadcrumbs. — **Don’t**: Only use icons to identify separate Breadcrumbs.

Do: Truncate breadcrumbs with an ellipsis when space is limited or the seven item limit is reached. It is also recommended to show at least three items in addition to an ellipsis at a minimum.

Don’t: Truncate Breadcrumbs when there are three or fewer items if space allows. — **Don’t**: Truncate Breadcrumbs when there are three or fewer items if space allows.

Do: Use an ellipsis to trigger a Pop Up Menu of hidden page links on-click.

Don’t: Orphan the last Breadcrumb item when line-wrapping. — **Don’t**: Orphan the last Breadcrumb item when line-wrapping.

Do: Nest all truncated links under a single ellipsis if more than one Breadcrumb item needs to be truncated.

Don’t: Truncate a single item with an ellipsis unless space is limited. — **Don’t**: Truncate a single item with an ellipsis unless space is limited.

Asset Status

Asset	Version	Status
Documentation	N/A	Available
UI Kit - Dark	v7	Available
UI Kit - Light	v7	Available
UI Kit - Wireframe	v7	Available
Web Component	v7	Available
Component Tokens	N/A	Planned

Status Key

AvailableIn ProgressPlannedNot AvailableDeprecated