Skip to main content

Breadcrumbs

Breadcrumbs are a secondary navigation pattern that provides users with an ordered list of links that helps visualize locational awareness within a site’s hierarchy.

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.
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.
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.
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.
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.
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.
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
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel