Breadcrumb navigation is the short trail of links near the top of a page that shows where you are on a site, such as Home > Women’s shoes > Trainers. Each step is a link, so visitors can jump back up a level in one click. Breadcrumbs help people who arrive deep in a site from a search, and they help search engines understand how your pages fit together.
Think of the map in a shopping centre with the “You are here” marker. That’s the job a breadcrumb trail does.
What are breadcrumbs on a website?
They’re a secondary navigation aid, shown as a single line of links above the page title. Say someone searches for a particular pair of trainers and lands straight on the product page. The breadcrumb trail tells them they’re in Women’s shoes > Trainers, and lets them browse the rest of the range without going back to the homepage or the search results.
They matter most on sites with depth: online shops, large service sites, knowledge bases and blogs with many categories. A five-page brochure site rarely needs them.
The types of breadcrumb
- Location breadcrumbs show where the page sits in the site’s structure. They’re the most common and the most useful: Home > Services > Web design.
- Attribute breadcrumbs show the filters a shopper has applied, such as Trainers > Size 6 > White. They’re common on e-commerce sites and save people from reapplying filters.
- History breadcrumbs show the pages a visitor has just viewed. They’re rarely used now, because the browser’s back button already does this job and the trail looks different for every visitor.
A breadcrumb trail answers two questions at a glance: where am I, and how do I get back?
Breadcrumb best practices
- Start at the homepage. It gives every trail the same anchor point.
- Separate each level clearly. The “>” symbol or a small chevron is what most people expect.
- Don’t link the current page. Show it as plain text at the end of the trail.
- Keep it to one line. Shorten long page names, and on mobile consider showing only the last level or two.
- Supplement your menu with breadcrumbs. They’re a back-up for the main navigation, which still needs to work without them.
- Make them accessible. Wrap the trail in a navigation element labelled “Breadcrumb” and mark the current page with aria-current, following the W3C’s published breadcrumb pattern, so screen reader users know what it is.
Breadcrumbs and search engines
Add BreadcrumbList structured data (schema.org markup) alongside the visible trail. It tells Google how the page fits into your site, and Google can show the trail in search results in place of a long URL. Most SEO plugins for WordPress, including SEOPress and Yoast, can output both the visible breadcrumbs and the markup. Check the result with Google’s Rich Results Test.
Breadcrumbs also add internal links from deep pages back up to your category pages, which helps search engines crawl the site. They work best alongside a clear page hierarchy, one of the Gestalt principles of grouping in practice.
How we approach navigation
On larger sites we plan breadcrumbs at the wireframe stage, alongside the main menu and the page structure, so they reflect how visitors actually look for things. You can read more about our web design services.
FAQs
Do breadcrumbs help SEO?
They can. Breadcrumbs add internal links that help search engines understand your site structure, and with BreadcrumbList structured data Google can show the trail in search results. They won’t lift rankings on their own, but they make a site easier to crawl and to navigate.
Where should breadcrumbs go on a page?
Near the top, above the main page heading and below the main menu. That’s where visitors expect them, and it’s where they’re most useful for someone who has just landed on the page.
