What is a breadcrumb in UX?

Three flavors of breadcrumb

Not all trails work the same way, and the difference matters when you decide which one to build.

• Location breadcrumbs show where the page sits in the site's hierarchy. This is by far the most common type, and the one most people mean.
• Path breadcrumbs show the route the visitor actually took to get here. They are rare now, because the browser's back button already does that job.
• Attribute breadcrumbs describe the item by its properties, for example Men's > Waterproof > Size 10. You see them on product pages that belong to several categories at once.

For most sites, location breadcrumbs are the right default. They stay stable no matter how someone arrived, which makes them predictable.

Why they earn their place

Many people do not land on your homepage. They arrive from a search result straight onto a product, an article or a help page deep inside the site. A breadcrumb answers the question "where am I, and what else is nearby?" without making them open a menu.

It also gives a fast way to climb up one level. Someone viewing a single running shoe who decides they want to see other running shoes can click one link instead of hunting through the main navigation.

Breadcrumbs are quiet helpers. They add a sense of structure to large sites, and they take almost no screen space, so they cost very little to include.

How to design a good one

Keep it simple and put it where people expect it, usually just above the page title. Show the full path from the homepage down to the current page, separate the steps with a clear symbol such as a chevron or slash, and make every level except the last one a link.

The current page should look different, often plain text, so it is clear that it is not clickable. Use the same labels as your main navigation and page titles. If a category is called Running in the menu, do not call it Run Gear in the trail.

Make the links big enough to tap on a phone. On small screens, a common approach is to collapse the trail to just the previous level, shown as a "back to Running" link, which saves space and is still useful.

Mistakes to avoid

The classic error is using breadcrumbs as the only way to move around. They are a secondary aid, and the main navigation still has to work on its own.

Another is putting them on a small site with only two levels. If the whole site is a homepage and a handful of pages, the trail adds clutter and no help.

Be careful with inconsistent hierarchies too. If a product lives in three categories and the trail changes depending on how you reached it, people lose their sense of place. Pick a primary path for each page and stick with it.

Finally, do not make the trail too small or too faint. A breadcrumb nobody can see helps nobody.

When to use them and when to skip them

Use breadcrumbs on sites with a clear, deeper hierarchy: online shops, documentation, large content sites, knowledge bases. Skip them on flat sites, single-page sites, and linear flows such as checkout, where you want people to keep moving forward, not wander upward.