Skip to content

Breadcrumb > Explore small breakpoint behavior

Purpose

Explore a more condensed variant of the breadcrumb at smaller breakpoints so that it can be inline with the nav and right sidebar toggle buttons while still providing intuitive access to the breadcrumb trail.

eye.svg View current state
Viewport width Screenshot
375px CleanShot_2023-03-21_at_14.24.35_2x
576px CleanShot_2023-03-21_at_14.28.33_2x
768px CleanShot_2023-03-21_at_14.29.19_2x

Concepts

  1. Truncate all except first and last, truncation expands in place via ellipse button
  2. Truncate all except first and last, truncation exposed via ellipse dropdown
    1. First item full
    2. First item avatar only
  3. Truncate all except current page, truncation expands in place via ellipse button
  4. Truncate all except current page, truncation exposed via ellipse dropdown
  5. Current page as dropdown
  6. Current page as ellipse button, truncation expands in place
eye.svg View concepts
Concept Screenshot Notes
1 image Similar to current desktop experience that uses the ellipse button to hide groups when there are three or more subgroups in the path, only this uses the ellipse button when there are >3 items.
2 image Similar to the previous concept, but with a dropdown instead of expand in place. This also explores just using the avatar on the first item. This introduces a problem though where a) it's a small click target, and b) there's no way to see the name unless it's also included in the dropdown, which breaks the pattern of only listing items in between the first and last. There's also the problem of a breadcrumb trail that doesn't start with an item that has an avatar, like this. If the breadcrumb were to expand in place, then the avatar could also expand with the text visible, but this would create an odd jump potentially.
3 image A combination of the current expand in place while truncating everything at the front. Like today, this is a one-way action and the breadcrumbs aren't collapsed again until a new page load.
4 image Similar to the previous concept, but with a dropdown instead of expand in place.
5 image This is the most simplified concept. Since the current page functions as the dropdown trigger, it's repeated in the dropdown as a link and the full breadcrumb trail is present. The slash is visible before the dropdown to provide subtle breadcrumb affordance.
6 image Extends the ellipse button with the text of the current page. This seems like the most unconventional of the concepts, and doesn't feel as clear in context. It could also include very long text that would need to be truncated, so then there would be an ellipse icon at the start, and an ellipse character at the end. This concept was included primarily to explore how different components impact the experience and relate to the action.

Figmacon.svg View working file in Figma →

Requirements

  • Current breadcrumb semantics must remain in place.
  • If a dropdown was used, the list of options within should also follow breadcrumb semantics and clearly communicate order.

Examples

Expand in place:

Dropdown:

Questions

  1. At what [larger] breakpoint should the truncation and/or behavior change?
  2. Should the behavior carry through to larger breakpoints?
  3. Is wrapping allowed?
  4. How should we proceed with testing?
  5. Does 128px max width of individual element still apply?
Edited by Jeremy Elder