Breadcrumb

A breadcrumb is a trail of links at the top of a page that shows where it sits in the site's hierarchy.

Also called: breadcrumbs
Platforms: Web
In the gallery: 50 web designs

Breadcrumbs from the Kombai gallery: a marketplace's help article, a shift-planning tool's terms of use and a storefront platform's how-to guide.

What is a breadcrumb?

A breadcrumb is a short row of links above the page title. It starts at the home page or the top section and steps down to the current page, so people can see where they are and jump back up any number of levels in one click.

Each level is a link, split from the next by a slash or a chevron.
The last item names the current page, set apart by weight or color.

Breadcrumbs show up across product detail, blog post, storefront and resources screens.

When to use a breadcrumb

Deep hierarchiesHelp centres, docs and catalogs with three or more levels.
People who land deepVisitors arriving from search on an article need a way up to its section.
Related pages by sectionWhen the parent section is the next place people look.

When not to use one

Flat sitesWith one level under home, the trail repeats the navbar.
Steps in a flowFor progress through checkout or sign-up, use a stepper.
Browsing historyIt shows the site's structure, not the pages someone visited.

Anatomy of a breadcrumb

This one works. Follow a link up the trail, or tab through it and press Enter. The page body links back down.

Request a refund

Open the order, choose Request a refund and pick a reason. Most refunds land in 5 days.

Link
Hover
Keyboard focus
Current page

RootHome or the top section
LinkOne per parent level
SeparatorSlash or chevron, drawn in CSS
Current pageLast item, not a link
StatesLink, hover, focus, current

Breadcrumb variants

We sorted every breadcrumb design in the Kombai gallery and found four patterns. Browse all 50 web designs.

1. Slash separators

Levels split by a thin slash, with the current page in a darker or bolder weight.

2. Chevron separators

Small right-pointing chevrons between levels, which read as "inside of".

3. Beside the search box

The trail on the left and a scoped search on the right, sharing one row at the top of a help centre.

4. A strip above the product

A thin full-width band under the navbar holding the trail, like Menu, Warm Drinks and the item.

Where breadcrumbs show up

Help centres

Help centre, topic and article, so people who land on one answer can browse the rest of its topic.

Legal and policy pages

A trail like Help, Policies and Terms that links each policy back to its section.

Apps and settings

A short trail like Home and Settings, often with a back arrow in front.

Breadcrumb vs similar components

Property	Breadcrumb	Navbar	Side navigation	Tabs
Shows	The path to this page	The top sections	Every section of an app	Views of one thing
Direction	Up the hierarchy	Across the top level	Anywhere in the app	Sideways, same level
Best for	Deep sites and docs	Sites with a few sections	Apps with many sections	Switching panels

Build notes

Wrap the trail in a <nav> element labeled "Breadcrumb", with the links in an <ol>.
Set aria-current="page" on the current page item.
Draw separators with CSS, so screen readers do not read them out.
Place it at the top of the page, before the <main> element.
Start at home and end at the current page or its parent. Never link the current page to itself.
On narrow screens, show only the first and last levels.

FAQ

Should the breadcrumb include the current page?

Either works. Ending on the current page in plain text confirms where people are. The GOV.UK Design System ends the trail at the parent section of the current page instead. If you show the current page, mark it with aria-current="page" and do not make it a link.

Slash or chevron?

Both are common. Slashes read as a path and suit dense layouts, chevrons read as steps into a section. Pick one per product and draw it in CSS, so screen readers skip it.

Do breadcrumbs help SEO?

They give every page links up to its sections. Google also reads breadcrumb structured data (BreadcrumbList) to categorize a page in its results and can show the trail there on desktop, though it doesn't guarantee it.

How do breadcrumbs work on mobile?

Long trails wrap or overflow on small screens. Show only the first and last levels, or collapse the middle into a button, so the trail stays on one line.

Related terms

All glossary terms · Browse 50 web breadcrumb designs