Breadcrumbs help users navigate digital applications by maintaining an overview of where they are in the navigational hierarchy and allowing them to quickly jump back to where they came from. This guide explains how to use them in different environments.

  • Usage
  • Examples
  • Related Component
  • Download



Breadcrumbs have a simple structure that goes from left to right. The farther to the left the higher the item stands in the hierarchy. The different items are divided by a chevron icon.


If breadcrumb navigation names get too long, additional space is needed. Use an ellipsis to display overflowing elements. When hovering over the ellipsis (or tapping on touchscreens), a popover shows the hidden navigation elements which then can be clicked (or tapped). Another pattern is only allowing users to navigate back one step at a time. Use this pattern only in header sections.



Related Component


If you download any document, you accept our Terms and Conditions.

Sketch UI Library