Components

Breadcrumbs

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.

Breadcrumbs
  • Usage
  • Examples
  • Related Component
  • Download

Usage

Structure

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.

Overflow

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.

 

Examples

Related Component

Download

Sketch UI Library