Answer 07 of 50

When Breadcrumb Navigation Becomes Important for User Orientation

6 min read

Breadcrumbs earn their space once a site’s hierarchy is three or more levels deep, and especially when visitors land on deep pages from search or an outside link. With only one or two levels, they add little: Nielsen Norman Group’s guidelines say that for sites “with only 1 or 2 levels of categories, a breadcrumb isn’t needed as a wayfinding device.” The rest of this page covers where they matter, which kind to use, and how to build them.

Where breadcrumbs are necessary

Online stores are the classic case. A shopper who drilled from Men’s Clothing to Shirts to Dress Shirts to a single product needs to see where that product sits, and to get back to Dress Shirts in one click instead of pressing Back several times.

Documentation and help centers can nest deeply, and people can arrive mid-structure. Someone who lands on an OAuth page from a search engine sees Documentation > API Reference > Authentication > OAuth 2.0 and understands the structure around them at a glance.

Knowledge bases, educational content, and wikis with several levels benefit for the same reason. Page Laubheimer’s 11 design guidelines for breadcrumbs notes that breadcrumbs “are especially useful when users arrive to the site through an external link and don’t start with the homepage.”

Where breadcrumbs add little

  • Flat sites. A marketing site with Home, About, Services, and Contact never goes more than one level deep. Highlighting the current section in the main navigation does the job instead.
  • Linear flows and app-like interfaces. A checkout or a single-page application has steps or states rather than a hierarchy, so a breadcrumb has nothing to show.
  • Focused landing pages. A breadcrumb offers a route away from the page’s single goal.
  • Blog posts. A trail like Blog > Marketing Tips > Article gives some context, but loose categories make it a weak navigation path; decide based on whether readers browse by category on your site.

Breadcrumbs are one layer of secondary navigation. How depth and breadth affect findability across the whole site is covered in how navigation complexity affects user drop-off, and the other secondary layer, the footer, in how footer design contributes to site usability.

Three kinds of breadcrumbs

Type What it shows Example When to use it
Location Where the page lives in the site hierarchy, however the user arrived Products > Electronics > Televisions The default for hierarchical sites
Attribute The filters or attributes selected so far Shirts > Blue > Size M Filtered category pages in stores
Path The pages the user clicked through in this session Home > Sale > Electronics > Product Only in special cases; it repeats the Back button

Jakob Nielsen described attribute trails in his 2007 article Breadcrumb Navigation Increasingly Useful: when users narrow a large product database, “the breadcrumb trail can list the attributes that have been selected so far.” The same article calls a “Hansel-and-Gretel-style history trail” basically useless because it duplicates the Back button, and the 2018 guidelines state that breadcrumbs should show “the Current Location in the Site’s Hierarchical Structure, Not the Session History.” A location trail also teaches users the site structure, but only if the hierarchy itself is clean; inconsistent nesting shows up in the breadcrumb.

Google uses breadcrumb markup to understand where a page sits. Its documentation on breadcrumb structured data says that “Google Search uses breadcrumb markup in the body of a web page to categorize the information from the page in search results.” Three details matter for planning:

  1. Desktop only, since January 2025. On January 23, 2025, Google stopped showing breadcrumbs in mobile search results, saying they get “cut off on smaller screens”; on mobile the visible URL is now the domain only, while desktop results still show domain and breadcrumb. The current documentation describes the feature as available on desktop.
  2. Multiple trails are allowed in markup. “If there are multiple ways to navigate to a page on your site, you can specify multiple breadcrumb trails for a single page.”
  3. Typical paths over URL mirroring. Google recommends “breadcrumbs that represent a typical user path to a page, instead of mirroring the URL structure” and says you do not need list items for the domain or for the page itself.

Breadcrumbs also add consistent internal links from every page to its parents, which helps crawlers find category pages. Treat them as a structural aid: Google’s breadcrumb documentation describes categorization, not a ranking boost.

Visual design

Breadcrumbs are secondary navigation, so they should be visible but not dominant: smaller type, placed just below the main navigation. The 2018 guidelines add specifics:

  • Include the current page as the last item, and do not make it a link. “You should never have a link that does nothing.”
  • Style the linked items so they look like links, and differentiate the current page from them.
  • Separators are largely cosmetic; NN/g recommends the “>” character.
  • For very long trails, shorten the middle with an expandable ellipsis rather than letting the trail run on.

Mobile

On small screens, long trails overflow or wrap. NN/g advises against breadcrumbs that wrap to multiple lines, and notes that “a single breadcrumb pointing up a level may be all that is necessary” on some pages, such as a product page where the shopper wants to see the rest of the category. A single “< Electronics" link loses the multi-level view but keeps the most useful step. Horizontal scrolling within the trail works only if people notice it can scroll, and dropping breadcrumbs on mobile is acceptable when the alternative is a cluttered trail.

Accessibility

The W3C ARIA Authoring Practices breadcrumb example sets out the structure:

  • Wrap the trail in a nav element labeled “Breadcrumb,” which makes it a navigation landmark people can jump to.
  • Put the links in an ordered list, so screen readers announce how many levels there are and in what order.
  • Mark the current page with aria-current="page"; the breadcrumb pattern notes that “If the element representing the current page is not a link, aria-current is optional.”
  • Add separators with CSS, so screen readers do not announce a “greater than” sign between every item.

Every link should be reachable by keyboard, with a visible focus state.

What your analytics can tell you

Breadcrumb clicks show which levels people return to: frequent clicks on the category level suggest browsing within categories, while frequent clicks on Home suggest people reorienting completely. Low usage can mean people do not need them or do not notice them, so compare with menu and search usage. Unusually high breadcrumb exits from a specific page can mean that page did not deliver what people expected.

Questions teams ask

Google’s breadcrumb documentation describes no such penalty. Breadcrumbs give every page consistent links to its parent pages, which helps crawlers find those pages, and Google uses breadcrumb markup to categorize pages in search results. Build them for users first and treat any search benefit as a side effect.

Our content belongs to several categories. How do we handle breadcrumbs?

Show one consistent trail on the page, based for example on the canonical category, so the visible trail never changes depending on how someone arrived. In BreadcrumbList markup, Google also accepts multiple trails when a page lives in more than one place.

Users aren’t clicking our breadcrumbs. Should we remove them?

Not on clicks alone. Nielsen’s 2007 article found that breadcrumbs “never cause problems in user testing” and take very little space, and people use them to confirm where they are without clicking. Check usability test feedback and overall navigation behavior before removing them.

Add location breadcrumbs when your hierarchy is three or more levels deep or people land on deep pages from outside, use attribute trails on filtered listings, mark them up for desktop search and screen readers, and on mobile keep at least a single link up a level.