Breadcrumb navigation: when a website needs it and how to design it

Breadcrumb navigation is the short trail of links, usually near the top of a page, that shows where the page sits in a website’s structure, such as Home > Shoes > Running shoes, and lets visitors step back up a level in one click. A website needs it when it has more than two levels of pages, such as an online store, a large service site or a knowledge base; a small, flat site usually does not.

Last updated: 31 October 2026.

This guide explains the types of breadcrumb, when they help and when they add clutter, how to design them for desktop and phone, how to make them accessible, how they help search engines, and the mistakes to avoid. It is written for marketing leads, product owners and designers planning a new site or a redesign.

At Odduel, a creative and technology agency in Barcelona and São Paulo, our UX/UI design service designs navigation for websites, shops and apps. On our own site, every article and case study prints a breadcrumb trail in its page data, and each article page has a visible way back to the list it came from; the advice below comes from that kind of work and applies to any site.

In short: use breadcrumbs when your site has three or more levels and people arrive deep inside it from search. Show the location path, not the visitor’s history; keep it short, in small type near the top; make every level except the current page a link; mark it up as a navigation landmark for screen readers and with structured data for search engines. On phones, show the parent level or a shortened trail rather than a long line that wraps.

What is breadcrumb navigation?

A breadcrumb is a secondary navigation aid. It does not replace the main menu; it complements it by answering two questions for a visitor who lands on a page: where am I, and how do I get to the wider section? The name comes from the trail of crumbs in the fairy tale, though unlike that trail, a good breadcrumb shows the structure of the site rather than the path a visitor happened to take.

A typical breadcrumb trail sits above the page heading, uses small text, separates levels with a symbol such as > or /, and ends with the current page, which is not a link.

What types of breadcrumb are there?

The table compares the three common types.

Type	What it shows	Example	Best for	Watch out for
Location-based	Where the page sits in the site’s structure	Home > Services > Branding	Most websites, service sites, knowledge bases	Pages that sit in several sections
Attribute-based	The attributes or filters that define the page	Home > Shoes > Women > Size 38	Shops with filters and faceted navigation	Long trails and duplicate addresses
History-based	The pages the visitor has just viewed	Back to results	Search results and filtered lists	Duplicating the browser’s back button

Most sites should use location-based breadcrumbs. Attribute-based trails help in shops, as long as filter combinations do not create endless addresses for search engines to crawl. History-based links, such as “Back to results”, are useful on a product page reached from a search, but they are a different tool from a breadcrumb trail.

When does a website need breadcrumbs?

Breadcrumbs earn their place when the structure is deep enough that a visitor could lose their bearings.

• Online stores with categories and subcategories, where people often land on a product page from search.
• Service sites with many services grouped into areas.
• Knowledge bases, documentation and help centres with nested topics.
• Blogs and magazines organised in categories, where a breadcrumb links an article to its section.
• Large corporate or public sites with several levels of pages.

They add little on small, flat sites with a handful of pages, on one-page sites, and on landing pages built around a single action, where a trail of links can pull attention away from the goal. For more on how navigation fits into the wider design process, see our UX/UI design guide.

How do you design breadcrumbs?

Good breadcrumbs are easy to spot when you need them and easy to ignore when you do not.

• Place them at the top, above the page heading and below the main navigation, in the same place on every page.
• Keep them small and quiet, in a smaller size than body text, so they do not compete with the heading.
• Make every level a link except the last. The current page is shown as text, so visitors understand where they are.
• Use clear separators, such as >, / or a small chevron, with enough space around them.
• Use the real page names, shortened if needed, so the trail matches the menu and the headings.
• Start with Home, or with the top section if the logo already links home and space is tight.
• Keep one path per page. If a product belongs in several categories, choose a primary one for the trail.

Test the trail with people who do not know the site. Ask them to find a product or article, then to reach the section it belongs to, and watch whether they use the breadcrumb, the menu or the back button. If nobody notices the trail, it may be too faint; if people misread the levels, the page names or the structure need work rather than the breadcrumb itself.

How do breadcrumbs work on mobile?

Long trails wrap badly on small screens and push the page heading down. Common solutions:

• Show only the parent level, as a single “back to section” link with an arrow.
• Truncate the middle of long trails, keeping the first and last levels.
• Let the trail scroll sideways in a single line, if it must stay complete.

Whichever you choose, keep touch targets large enough to tap comfortably and test on real phones.

How should online stores use breadcrumbs?

Shops are where breadcrumbs matter most, because product pages are often the first page a visitor sees. A shopper who lands on a single pair of running shoes from a search needs a quick way to see the rest of the range, and a trail such as Home > Shoes > Running shoes does that in one tap.

• Choose one primary category for each product, so the trail is consistent wherever the product is listed.
• Keep filters out of the trail unless the filtered page is a real, indexable category with its own content.
• Pair the trail with a “back to results” link when visitors arrive from a search or a filtered list, so they can return to exactly where they were.

Our guide to e-commerce website features covers the other navigation pieces a shop needs from day one.

How do you make breadcrumbs accessible?

Breadcrumbs should be as usable with a screen reader or keyboard as with a mouse. The W3C’s breadcrumb pattern describes the usual markup:

• A navigation landmark (a nav element) with a label such as “Breadcrumb”, so screen reader users can find it and skip it.
• An ordered list of links, which conveys the order of the levels.
• The current page marked with the aria-current attribute set to page, so it is announced as the current location.
• Separators drawn with CSS rather than typed as characters, so they are not read aloud at every level.
• Sufficient contrast and visible focus for the small text and links.

Our guide to website accessibility covers the wider requirements that apply in Europe.

Do breadcrumbs help SEO?

Breadcrumbs help search engines in two ways. The links themselves are internal links that tell crawlers how pages relate to their sections. And structured data describing the trail, using the BreadcrumbList type, can let search engines understand the hierarchy and, in some results, display the path in place of a plain address; Google documents the format in its breadcrumb structured data guidance.

For this to work, the trail should reflect a clear site structure and match the addresses. Our article on SEO-friendly URLs explains how addresses and structure support each other. On multilingual sites, each language version should carry its own breadcrumb names and addresses.

What are the common breadcrumb mistakes?

• Using breadcrumbs as the main navigation. They complement the menu; they do not replace it.
• Showing visitor history instead of location. That repeats the back button and confuses people who arrive from search.
• Linking the current page. A link to the page you are on is a dead end.
• Trails that do not match the menu. Different names for the same section in the menu and the breadcrumb.
• Breadcrumbs on flat sites. A trail of Home > Page adds nothing.
• Too small or low contrast. Breadcrumbs that are hard to read or tap on a phone.
• No structured data, or data that does not match the visible trail.

If you are reviewing an existing site, our UX audit checklist includes navigation checks alongside breadcrumbs.

Questions people ask

Breadcrumbs are a small detail that pays off on any site with depth: they orient visitors, support accessibility and help search engines read your structure. See how our UX/UI design service designs navigation, or tell us about your project and we will review how people find their way around your site.