Figma breadcrumbs components

A breadcrumb is the only navigation component that answers where am I rather than where can I go. It earns its keep in the places where hierarchy is real and deep: a store category three levels below the department, a documentation page inside a section inside a version, a file manager, a cloud console where the trail also names which account and project you are looking at.

On a shallow marketing site it is decoration. On a nine hundred page catalogue it is the difference between a landing from search and a bounce.

Hierarchy, not history

The rule that matters most is also the one most often broken. A breadcrumb shows the ancestors of the current page, not the route the visitor took to reach it. Nielsen Norman Group's guidelines are firm on this. Breadcrumbs supplement primary navigation, they never replace it, and the final item is the current page rather than a link back to itself.

A trail that mirrors the click path is a back button with extra steps, and it breaks the moment someone arrives from a search result with no path behind them. A sequence someone is working through wants progress steps instead.

Chevron or slash, and four ways to draw a trail

Divider is its own property, so you can move a whole product between chevrons and slashes without touching anything else. Chevrons read as directional and suit consumer navigation; slashes read as a path and suit anything file or repository shaped.

On top of that sit four trail types. Text is the plain row at 20px tall. Text with line pairs the same trail with a rule, at 36px overall, so it can sit hard against a page title without a gap doing the separating. Button raises each level into a 28px tall clickable chip with its own hover fill, which holds up better on a busy application header or above a dense dashboard.

Account dropdowns turns the levels into menu triggers, the pattern every cloud console uses for switching organisation and project mid trail, and it pairs with the dropdown menus in the kit. Each type comes in a desktop and a mobile version, and the whole file is duplicated in dark mode.

The first item and the last one

The underlying item component has an Icon boolean, which exists mostly for the first level: a 20x20 home icon in the text version, or a 28x28 icon button in the chip version, keeping the root recognisable without spending a word on it. At the other end, the Current property gives the last item its non link treatment.

Both ends are also where deep trees go wrong. Six levels do not fit on a phone, and the usual fix, truncating the middle behind an ellipsis, is fine as long as the root and the immediate parent survive, since those are the two levels people actually click. If the structure is deep enough that this is a nightly argument, a tree view in a sidebar may be doing the work the breadcrumb keeps failing to.

What the markup owes the page

Two contracts sit behind the visual. The W3C breadcrumb pattern asks for a labelled navigation landmark around the trail and aria-current set to page on the last item, which is what the Current variant is describing in code.

Separately, Google's BreadcrumbList markup turns the same trail into the path shown under your result in search, needs at least two items, and should describe a typical route to the page rather than copying the URL. Worth flagging in handoff, since the trail a designer draws and the trail a crawler reads are usually built by different people.

When it is time to build, Untitled UI React breadcrumbs are open source, built with Tailwind CSS and React Aria, with the navigation landmark and current page semantics already in place.