Design Guide: Breadcrumbs

Best Practices of Breadcrumb Design

NOTE: The majority of my inspiration came from Atlassian’s Design System

Let’s get right into it!

Anatomy

Because one cannot design before they define.

Please note, this is the terminology I will be using, although I know there are different definitions out there.

Utilization

Not every app needs breadcrumbs. At the same time, you should not avoid them due to the common misconception that they are outdated. You should leverage breadcrumbs if your app has a large hierarchical structure. Think Amazon.

Design best practices

1. Breadcrumb width should not exceed half of the page

This is for the sake of readability. Christian Holst says it best:

If breadcrumb text wasn’t so readable to begin with I’d probably make the width 1/3 of the page.

This should be true whether the breadcrumbs are collapsed or expanded.

Breadcrumbs overflow to next line in this example.

The only instance where you should not follow this rule is for mobile apps. In this case, use the entire screen width.

On phones, you do not need to break screen up into readable columns.

2. Collapse breadcrumbs by default if they have 4+ items

Why 4+ items? I’ll be honest, I picked this limit as it just “feels” right. 🙃

If the user wants to see the entire trail of breadcrumbs, they should have the option to do so. As you can see from the design below, adding clickable ellipses is a great way of implementing this.