Breadcrumbs are the smallest navigation element on most websites and one of the most misunderstood. Done well, a breadcrumb tells a visitor exactly where they are, gives them a one-click route back up the hierarchy, and hands search engines a clean map of your site structure. Done badly, it becomes a row of grey text nobody clicks, or worse, a trail that contradicts your actual information architecture. pencilandpaper.io walks through the specifics.
This guide covers breadcrumb design from a practical angle: the three real breadcrumb types, seven patterns you can implement this week, where to place the trail, how to handle mobile, and how to choose separators and truncation. Examples are taken from e-commerce catalogs (including PrestaShop stores) and content-heavy sites.
What is a breadcrumb, in one paragraph
A breadcrumb (or breadcrumb trail) is a secondary navigation element that shows the user’s current position inside a hierarchy and lets them jump to any ancestor level. It is secondary by definition: it never replaces the main menu, and users should be able to complete every task without it. A typical e-commerce example looks like this:
Home > Men > Shoes > Running Shoes > Nike Pegasus 41 navbar.gallery walks through the specifics.
Two rules follow from that definition and they explain most breadcrumb failures:
- A breadcrumb is only useful when your content is actually hierarchical. Flat sites with five pages do not need one.
- A breadcrumb must reflect the structure of the site, not the path the visitor happened to take.
The three breadcrumb types (and when each one earns its space)
1. Location-based breadcrumbs
The default and by far the most common. They display the static hierarchy of the site: category, subcategory, current page. The trail is identical for every visitor because it depends on the page, not the session.
Use it when: your site has three or more levels of depth. Online stores, documentation, knowledge bases, government portals, large blogs with category structures.
Example: Home > Garden > Watering > Hose Reels
2. Path-based breadcrumbs (history trails)
These show the pages the user visited to get to the current page. They are dynamic and change per session.
Use it when: almost never on public websites. The browser back button already does this job better, and a path trail confuses users who arrive from Google (their trail is empty or reads oddly). The one legitimate case is a multi-step process inside an application: configurators, quote builders, onboarding wizards, complex checkouts. Even then, label it as a step indicator, not as a breadcrumb.
Example of a legitimate path-style trail: Cart > Address > Shipping > Payment
3. Attribute-based breadcrumbs
These describe the current page by the attributes or facets applied to it, rather than a single parent chain. They are the natural fit for filtered product listings where one item belongs to several categories.
Use it when: you run a faceted catalog and users routinely combine filters. Attribute crumbs double as removable filter tags, which is a strong usability win.
Example: Home > Laptops > Brand: Lenovo ✕ > RAM: 16 GB ✕ > Under 1000€ ✕
| Type | What it shows | Best for | SEO value |
|---|---|---|---|
| Location | Static site hierarchy | Stores, docs, large blogs | High (internal linking + rich results) |
| Path / history | User’s session journey | Wizards, configurators only | None |
| Attribute | Applied facets and filters | Faceted catalogs, marketplaces | Medium (careful with indexation) |
7 breadcrumb design patterns that improve structure and UX
Pattern 1: Full location trail with a non-clickable current page
The baseline pattern. Every ancestor is a link, the last item is plain text representing the page you are on. Making the last crumb clickable is a classic mistake: it creates a link to the current URL, which users find pointless and which adds noise for crawlers.
- Ancestors: links, in your standard link colour or a neutral dark grey with underline on hover.
- Current page: no link, slightly darker or bolder, so it reads as an anchor point.
- First crumb: use the word Home rather than a bare house icon, or use both. Icon-only home links are less obvious to non-technical audiences.
Pattern 2: The breadcrumb as a subtitle to the H1
Place the trail directly above the page title, tight to it, with the H1 clearly dominant. This visually binds "where I am" to "what this page is", and it works particularly well on product and article pages. The typical spec: 12 to 14 px text, 60 to 70 percent contrast against the background, 16 to 24 px of space between the trail and the H1.
Pattern 3: Truncated middle with an expandable ellipsis
For deep hierarchies (five levels or more) or long category names, keep the first crumb, the current page and its direct parent, and collapse the middle into an ellipsis that expands on click.
Home > ... > Running Shoes > Nike Pegasus 41
Two rules: never truncate the direct parent (that is the crumb users click most), and never truncate silently. The ellipsis must be an interactive control with an accessible label such as "Show all levels".
Pattern 4: Dropdown crumbs for sibling switching
Each crumb carries a small chevron that opens a list of its siblings. From Home > Kitchen > Cookware, opening the "Cookware" dropdown reveals Bakeware, Utensils, Knives. This turns the breadcrumb from a one-way escape hatch into a lateral navigation tool. Very effective on large catalogs and documentation sites, but only if the interaction is click-based, not hover-based, so it survives touch devices.
Pattern 5: Single "back to parent" crumb for mobile
On narrow screens a full trail either wraps to three lines or scrolls off-screen. The cleanest fallback is one crumb pointing at the direct parent:
← Running Shoes
It costs one line, it is thumb-friendly at 44 px of tap height, and it answers the only question most mobile users have: how do I get back to the list I came from. Keep the full trail in the DOM for structured data, or expose it through your BreadcrumbList schema.
Pattern 6: Horizontally scrollable trail
An alternative mobile approach: keep the whole trail on a single line inside a horizontally scrollable container, with the current page visible at the right and a subtle fade on the left edge indicating more content. Works well when category names are meaningful and users navigate laterally a lot. Avoid it if the trail routinely exceeds four items, because scrolling to reach the home link becomes tedious.
Pattern 7: Attribute crumbs that double as removable filters
On faceted listings, render applied filters as crumbs with a small remove control. Each removal reloads the listing without that facet. This single pattern removes the most common frustration on category pages: users who over-filter, get zero results, and cannot tell which criterion to relax. Combine it with a "Clear all" action to the right of the trail.
Where to put the breadcrumb on the page
Placement is not decoration, it is discoverability. Users look for breadcrumbs in one place: the top left of the content area, below the header and above the title.
- Above the H1, below the main header. The convention. Do not fight it.
- Left aligned with the page content grid. Centred breadcrumbs read as decorative text and get ignored.
- Never inside a sticky header that also holds your menu and search. It steals vertical space on every scroll and competes with primary navigation.
- Never in the footer. A footer breadcrumb is invisible to the people who need it, though some sites do add a duplicate secondary trail there for long articles. If you do, keep only one in the structured data.
- Above the fold on product pages. If your breadcrumb sits below the gallery, it is not doing its job.
One important e-commerce detail: on category pages, put the breadcrumb above the category description and the filter bar. Users scanning results will not scroll up to find their location. There is a practical rundown of it online.
Separators, spacing and typography
Separator choice looks trivial and yet it changes perceived direction and readability.
| Separator | Reads as | Notes |
|---|---|---|
| > (greater-than) or chevron icon | Descending hierarchy | Safest default, strongest directional cue |
| / (slash) | File path | Compact and clean, slightly more technical feel |
| » (double chevron) | Hierarchy, dated look | Common on older CMS themes, still readable |
| • or | (bullet, pipe) | A list of equals | Avoid, removes the sense of levels |
| → (arrow) | A process or sequence | Reserve for step indicators |
Practical specs that hold up in real projects:
- Separators added with CSS pseudo-elements, so they are not read aloud by screen readers and not copied when a user selects text.
- 8 to 12 px of horizontal breathing room on each side of the separator.
- Separator colour lighter than the crumb text, roughly 40 to 50 percent opacity, so the links dominate.
- Text size 12 to 14 px, never smaller than 12 px, and always meeting the 4.5:1 contrast ratio for link text.
- Do not underline crumbs by default if the container already reads as navigation, but always underline on hover and focus.
When breadcrumbs help, and when they are just clutter
They help when
- Your hierarchy is three levels deep or more.
- A large share of traffic lands on deep pages from search, ads or social, with no context about the wider site.
- Users browse laterally: comparing products, reading several articles in the same category.
- Items live in several categories and the trail clarifies which one the visitor is currently inside.
They are clutter when
- The site is flat: landing pages, one-page sites, small brochure sites with a five-item menu.
- The trail would read
Home > Contact. A two-item breadcrumb communicates nothing that the menu does not. - You are inside a linear funnel (cart, checkout, payment). Breadcrumbs there invite abandonment. Use a step indicator with no upward links, or none at all.
- The trail duplicates a visible sidebar tree on the same screen.
- The hierarchy is invented purely for the breadcrumb and matches nothing in the menu or the URL.
Common implementation mistakes that break the hierarchy
- Using the referrer instead of the structure. If a product reached from search shows
Home > Search results > Productwhile the same product reached from a category showsHome > Shoes > Product, you have built a path breadcrumb by accident. Pick one canonical parent per page. - Multi-category products with no canonical parent. When an item sits in three categories, your breadcrumb must choose the primary one, deterministically, on every render. Random or session-based parents send inconsistent signals to crawlers.
- Breadcrumbs that contradict the URL. A trail reading
Home > Sale > Coatsunder the URL/women/outerwear/coats/confuses both users and search engines. Align breadcrumb, URL and menu. - Linking the current page. The last crumb is a label, not a link.
- Truncating the parent. Cutting the level users click most defeats the purpose.
- No structured data. Without a
BreadcrumbListin JSON-LD, Google may build its own trail from the URL and display something you did not choose in the results page. - Mismatched schema and visible trail. The markup must describe the crumbs the user actually sees. Injecting extra levels for keyword reasons is a structured data policy problem.
- Missing accessible semantics. Wrap the trail in
<nav aria-label='Breadcrumb'>containing an ordered list, and mark the current item witharia-current='page'. - Tap targets too small on mobile. 12 px text with 4 px padding is unusable with a thumb. Give crumbs at least 44 px of vertical tap area.
- Layout shift. Breadcrumbs rendered by JavaScript after paint push the H1 and the product gallery down, hurting Core Web Vitals. Render them server side.
- Filtered URLs generating endless crumbs. Attribute breadcrumbs on faceted pages should stay out of the indexable structure unless the facet combination is a page you deliberately want ranked.
- Localisation gaps. On multilingual stores, untranslated category names in the trail are one of the most visible quality defects. Check every language, including right-to-left layouts where the separator direction must flip.
Breadcrumb design in a PrestaShop context
PrestaShop ships with a location-based breadcrumb out of the box, and most themes render it in the right place. The work usually sits in three areas:
- Default category as canonical parent. Set a deliberate default category for every product so the trail is stable, and make sure your associated categories do not silently override it.
- Mobile treatment. Many themes let the trail wrap to two or three lines on small screens. Switching to a single "back to parent" crumb or a scrollable single line is a quick, high-impact fix.
- Structured data. Verify that the
BreadcrumbListJSON-LD matches the visible trail after any theme customisation, and re-test it whenever you change the category tree or add a language.
A useful habit: after every catalog restructure, sample twenty deep pages (products, subcategories, CMS pages, blog posts, filtered listings) and check the trail on desktop and mobile. Most breadcrumb bugs come from edge cases, not from the homepage.
A short checklist before you ship
- Trail sits top left, above the H1, left aligned to the content grid.
- Every ancestor is a link, the current page is not.
- Direct parent is always visible, even when the middle is truncated.
- Separators come from CSS, contrast lower than the crumb text.
- Mobile: single line, no wrapping, tap targets at least 44 px.
- Semantics:
navwith anaria-label, ordered list,aria-current='page'on the last item. BreadcrumbListJSON-LD present, server rendered, matching what is on screen.- Breadcrumb, URL and menu tell the same story about your hierarchy.
- No breadcrumb inside the checkout funnel.
FAQ
What is an example of a breadcrumb?
On a clothing store, a product page might display Home > Women > Jackets > Wool Coats > Alma Wool Coat. The first four items are links to higher levels, the last one is plain text naming the page you are viewing.
What are breadcrumbs in UX design?
They are a secondary navigation pattern that shows the user’s position within a hierarchy and provides one-click access to any parent level. They complement the primary menu and reduce the effort needed to move up or sideways in a large site.
How many levels should a breadcrumb show?
Show the full trail when it fits on one line, typically up to four or five items. Beyond that, collapse the middle behind an expandable ellipsis and keep the home link, the direct parent and the current page visible.
Should the last breadcrumb item be clickable?
No. It represents the page the user is already on, so it should be plain text with aria-current='page'. Keep it in your structured data as the final item without a link, or with the page URL as its identifier.
Do breadcrumbs help SEO?
Yes, in two ways. They create consistent internal links that distribute authority through your category structure and clarify your hierarchy for crawlers. With valid BreadcrumbList markup, the trail can also replace the raw URL in search results, which reads better and can lift click-through rates.
How should breadcrumbs work on mobile?
Never let them wrap over several lines. Either show a single "back to parent" crumb with a left arrow, or keep the full trail on one horizontally scrollable line with the current page anchored on the right. Keep the complete hierarchy in your structured data either way.
Are breadcrumbs still relevant, or has search replaced them?
They remain relevant precisely because so much traffic lands deep in a site. Site search answers "where can I find X", breadcrumbs answer "where am I and what else is nearby". Those are different questions, and large catalogs need both.
Can I use breadcrumbs on filtered category pages?
Yes, and attribute breadcrumbs that double as removable filter tags are one of the highest value patterns in e-commerce. Just keep tight control over which filter combinations are indexable, so faceted URLs do not multiply in search results.