What Are Breadcrumbs in Web Design?
Breadcrumbs (or a breadcrumb trail) are a secondary navigation aid: a row of clickable links near the top of a page that shows where the current page sits in a website’s hierarchy. Each link leads back to a parent page, so visitors can jump to any level of the site, up to the homepage, in one click.
More About Breadcrumbs
The goal of breadcrumbs is to simplify website navigation. Breadcrumbs make it easy for visitors to find the “parent” page for whatever content they’re browsing. Traditionally, the trail sits at the top of the page, just below the main navigation menu.
Here’s what a breadcrumb looks like on an online store: Home > Men’s shoes > Trail runners > Product name. On a blog, it might read Home > Blog > Web design > Post title. Each item is a link to a parent page, the items are separated by a “>” or “/” character, and the last item (the page you’re on) isn’t a link.
The three types of breadcrumbs
Most breadcrumb trails fall into one of three types:
- Location breadcrumbs show where the page sits in the site’s hierarchy, from the homepage down. This is the most common type.
- Attribute breadcrumbs show the categories or filters that describe the current page, such as size or color on an ecommerce product page.
- Path breadcrumbs replay the route one visitor took to reach the page. Avoid these: they duplicate the Back button, and they mean nothing to visitors who arrive on a deep page from a search result.
When to use breadcrumbs
Add breadcrumbs when your site has 2 or more levels of hierarchy. Online stores with layered product categories, documentation libraries, and blogs that cover numerous topics all qualify. Skip them on a flat, single-level site, where the trail would only repeat the navigation menu.
Breadcrumbs are secondary navigation. Nielsen Norman Group’s design guidelines, which have recommended breadcrumbs since 1995, are clear on the boundary: a trail supplements the global navigation and local menus, never replaces them, and it should reflect the site’s structure rather than the visitor’s click history.
Breadcrumbs and user experience
On a site with a complex page structure, breadcrumbs improve the user experience (UX) at almost no cost to the interface: one short row of links takes little screen space. They earn their keep with visitors who land on a deep page from a search result. Instead of hitting Back and leaving, those visitors get a one-click path to broader, related pages on your site.
Breadcrumbs and SEO
Breadcrumbs can show up in your search listings, too. Google treats breadcrumbs as a search feature: when a page includes BreadcrumbList markup, a type of structured data, Google can display the page’s position in the site hierarchy in its search result. Google’s breadcrumb documentation lists the feature as available on desktop in all regions and languages where Google Search is available. If your pages already show a visible trail, add the markup so search engines can read the same path your visitors see.
Frequently Asked Questions
How do I add breadcrumbs to my WordPress site?
Check your theme first: many WordPress themes include breadcrumbs you can turn on. If yours doesn’t, a plugin can add both the visible trail and the BreadcrumbList markup. Google’s documentation notes that a plugin integrated into your CMS is often the easier way to add structured data.
Why is it called a breadcrumb?
The name comes from the Hansel and Gretel fairy tale, in which the children drop a trail of breadcrumbs to retrace their path home. A website breadcrumb works the same way: each link marks the trail back to where you started.
How should breadcrumbs work on mobile?
Keep the trail compact and on a single line. Nielsen Norman Group’s mobile guidance warns against breadcrumb trails that are too tiny to tap or that wrap onto multiple lines. Test yours on a real phone before you ship it.
