Skip to main contenteBay Playbook

Breadcrumb

v2.2.0

Breadcrumbs show the navigational hierarchy of a page.

Stylized graphic of a breadcrumb.

Considerations

Guiding

Breadcrumbs help wayfinding no matter how many layers.

Hierarchal

Breadcrumbs show a user's current location within the hierarchy of a site.

Contextual

Breadcrumbs help users understand what screen they're on relative to the information architecture.

Anatomy

Anatomy for a breadcrumb. The order of the pieces left to right read page 1, chevron, overflow, chevron, page 3, chevron, and page 4. Number one points to the page title “Page 1”. Number 2 points to a chevron. Number 3 points to the overflow icon.
  1. Page link
  2. Separator
  3. Overflow

Properties

Default

By default, the first item is the root category page and the last item is the most immediate parent page. Pages within the hierarchy are separated by a chevron to indicate the hierarchical relationship.

Horizontal breadcrumbs, with Page 1, Page 2, Page 3, Page 4 links separated by chevron icons.

Last item as current

The last item in the hierarchy can be the current page title if it is valuable to include, and it should be static, not interactive.

4 breadcrumb links, 3 in foreground secondary color, final one in foreground primary color.

Overflow

Use an overflow control to collapse pages when there are 4 or more labels visible to avoid extending elements offscreen.

Overflow can also be used if multiple parent pages have truncated labels.

The width of the parent container informs how many items are collapsed into an overflow and whether or not the last page is truncated.

Pagination control with collapsed page links showing 'Page 1', an overflow menu, and 'Page 6'; breadcrumb trail for 'Business & Industrial > Adjustable Po...' with truncated text.

Behavior

Character count

While titles can vary in size, the preferred character count for titles is 24 characters and under.

Breadcrumb navigation with 'Home & Garden > Outdoor cooking tools > Barbecue Tools' and character counts below each, 13, 21, and 14 respectively.

Multiple long labels

Only 1 label should be truncated within the hierarchy. If multiple labels are long, collapse all but the last page into the overflow menu.

Breadcrumb navigation showing two categories: Business & Industrial and Adjustable Power Supplies, separated by an overflow icon with chevrons on both sides.

Screen sizes

Small

Web collapses all parent pages into an overflow and only surfaces the last item. Native apps do not use breadcrumbs. Instead, use the top navigation bar with a back action.

A small web design of a view item page. Breadcrumb navigation is placed under the top navigation. The breadcrumb has two pages separated by an overflow icon and chevrons on either side.

Web

A small native design of a view item page. This design does not have breadcrumbs and only has a top navigation bar with a left chevron to navigate backward.

Native

Medium

Native apps do not use breadcrumbs. Instead, use the top navigation bar and a back action, or a navigation rail.

A landscape tablet UI design with a top navigation bar containing a left chevron to navigate backwards.

Large

Breadcrumbs on larger screens are located below the global navigation and above the page title or other page content.

A large screen design featuring a navigation bar at the top, followed by breadcrumb navigation and then the page content.

Best practices

Number of labels

Do keep the number of items visible to no more than 4. Collapse pages into an overflow if there are more.

Breadcrumb navigation with 3 visible labels and 1 hidden item represented by the overflow icon.

Don’t have more than 4 labels visible. This can get overwhelming and is unnecessary to convey the general context.

Breadcrumb navigation with 5 visible labels and no overflow icon.

Label length

Do collapse all labels except for the first and last items if there are multiple long labels.

A breadcrumb with two labels and an overflow between them. The overflow is selected and the popover contains two items with long labels.

Do not show more than 24 characters or let labels wrap to a new line.

Two rows of breadcrumb examples. The top row has 4 labels that are each two lines of stacked text separated by chevrons. The bottom row has 4 long labels that wrap to two lines.

Navigation augmentation

Do use breadcrumbs in addition to navigation.

A small screen design with a top navigation bar followed by a breadcrumb navigation. A full-width image follows the breadcrumbs.

Do not use breadcrumbs as primary wayfinding.

A small screen design with a breadcrumb navigation as the sole navigation at the top of the page. A full-width image follows the breadcrumbs.

Specs

A detailed spec of a breadcrumb. From left to right reads page 1, chevron, overflow icon, page 3, chevron, page 4. The height of the overall breadcrumb with the overflow icon is 24px tall. Spacing on either side of the chevrons are 6px. The overflow icon is 24px wide and tall. The chevron icons are 12px. The height of the page titles are 16px.

Change log

VersionDateNotes
2.2.0
Jun, 2024
  • Updated to eBay Evo
2.2.0
Apr, 2023
  • Updated 12px chevrons to use 12px artboards and adjusted spacing specs
2.1.0
Nov, 2022
  • Updated overflow button to use icon button background
  • Created overflow button component with states
  • Updated max-width for page labels
  • Increased size of overflow button from 20x20 to 24x24
2.0.0
Jun, 2022
  • Added overflow menu property
  • Updated page limit to 4 before collapsing into an overflow menu
  • Added truncation rules
  • Breadcrumbs no longer scroll or wrap
  • Updated to use appropriate color style tokens