Breadcrumbs

 
Breadcrumbs 1.png
 

Primary Use-Case

Context needs to be preserved when navigating through a hierarchical or tree-like structure of content where the content itself takes the most visual precedence.

Design Challenges

  • The cardinality of the content hierarchy is often hard to estimate because it depends on how the customer or user has set up the application based on their specific environment.

  • The hierarchy could be deep or wide, and may not always be balanced.

  • Context must always be visible to the user does not get confused as to how they navigated to the current page.

  • This also helps when working as a team, one user needs to communicate with another user, the context they are observing or experiencing an issue in.

  • As a navigational tool, the user should be able to jump back to a previously traversed part of the content hierarchy without needing to use the “back” browser interaction multiple times.

  • In a more advanced scenario, the user should also be able to open a sibling node of a previously traversed part of the content tree and start traversing a different branch.

Design Considerations

  • The breadcrumb UI should be seen visually above the content it references to.

  • The individual parts should look clickable to allow for jump-navigating backward.

  • If allowing alternate branch traversal, the affordance should indicate that it is permitted and the interaction should be separate from that allowing a simple jump to a previous context.

 
Breadcrumbs 2.png
Breadcrumbs 3.png
 
  • There should also be an easy way to show which node is selected, and filter the list of sibling nodes to allow easy finding.

  • Overflow patterns should be gracefully handled. Especially if a page was opened with a large contextual navigation without the user actually navigation through it (eg: L1 operator shares a link to a problem with the app owner with context already traversed).

 
Breadcrumbs 4.png