Website Breadcrumbs Explained: Types, SEO, and Setup

Picture wandering a big hardware store for one specific drill bit. You follow the aisle signs from Tools to Power Tools to Drill Bits, glancing back to see where you came from.

Website breadcrumbs work the same way: a short trail of links, like Home > Blog > Starting a Shop, that shows visitors where they are and how to get back.

This post covers the main types of breadcrumbs, how they help people get around and support search engine optimization (SEO), whether your site needs them, and how to design them for both desktop and small screens.

You’ll also get no-code setup steps for Wix, Squarespace, Webflow and WordPress.

What Website Breadcrumbs Are and Their Purpose

Ever landed on a product page and wondered where it sits on the site? That small row of links at the top is the answer.

What does breadcrumb mean?

On a website, a breadcrumb is a text-link navigation trail: a short row of clickable links showing the path from the homepage to the page you’re on.

It usually sits at the top of the page and shows where you are in the site’s hierarchy, with the broader sections above. It also lets visitors go back up a level in one click. The trail tells you where you are, not just how to get out.

Think of a retired teacher with a new gardening blog. A reader who lands on a tomato post from a search sees Home > Vegetables > Tomatoes, and one click on Vegetables shows every vegetable post.

Where the name breadcrumbs came from

The name comes from the fairy tale of Hansel and Gretel, in which two children drop bread crumbs along the path through the woods so they can find their way home. Online, the trail works the same way: a set of markers that lets you retrace your steps.

How trails look on different sites

Trails change with the site, but the pattern holds steady. Here’s what you’ll see:

• E-commerce: Home > Kitchen > Cookware > Skillets, so shoppers can step back to all cookware.
• University courses: Home > Biology > BIO 101, so students can return to the department.
• Healthcare information: Home > Conditions > Diabetes > Symptoms, so readers can move back to the broader topic.
• News sections: Home > World > Europe, so readers can jump to the full section.

Same rule everywhere: broad to specific.

The Main Types of Breadcrumbs

Breadcrumbs are the small text trail near the top of a page that shows how a visitor got there. Your main menu shows what is on your site, while breadcrumbs show where a visitor is standing right now.

There are three main types, each answering a different question.

Trails that show where a page sits

This is the most common type, and it usually looks like Home > Category > Page. Picture a florist’s online shop: a customer lands on a bridal bouquet page and sees Home > Weddings > Bridal Bouquets at the top.

The trail is static for every user, so everyone who lands there sees the same path. One click on “Weddings” takes them up a level without hunting through the menu.

Trails that show selected filters

This trail shows the filters a visitor has chosen, such as Home > Shoes > Women’s > Size 8. It’s common in e-commerce, where shoppers narrow long product lists by size, color or price. Each filter in the trail can be removed by clicking it.

Consider a small clothing shop where a customer picks “Medium” and “Linen,” then decides the size is wrong. One click on “Medium” clears that choice and keeps the rest of the search intact.

Trails that track pages you visited

This type is about where you’ve been, not where a page sits. It shows the pages a visitor has moved through, but it’s rarely used because the back button you already have does the same job. Handy, but rarely the star.

It’s often paired with one of the other types. A retired teacher reading a sourdough post, then one on starters, sees that whole path at a glance.

How Breadcrumbs Help People Get Around

Breadcrumbs help visitors get around, keep them browsing, and work for everyone. Here’s how each piece works:

Getting around with fewer back clicks

The breadcrumb trail is less about going back and more about going up. A UX/UI Principles entry on breadcrumb navigation notes that breadcrumbs can reduce the need to keep clicking the browser’s back button.

This is especially useful for search-landing visitors. Picture a florist’s customer who lands on one peony page from search: the trail reads Home, Bouquets, Peonies, so one click reaches the full collection. One click, not three.

Breadcrumbs also reduce disorientation. A report on breadcrumbs in EPrints describes them as showing users where they are within a website’s hierarchy. They also help preserve filters when someone returns to a list.

Keeping visitors exploring and converting

A clear way up can help with lower bounce rates (the share of visitors who leave after viewing a single page) and more pages explored.

Breadcrumbs can also support better conversion rates, meaning more visitors take the action you want, like buying or booking.

A study of breadcrumb navigation in retail websites notes that breadcrumbs can show users their progress through a multi-step process.

Picture a yoga studio’s booking form, where the trail reads Schedule, Choose Class, Pay, so visitors see how close they are to finishing.

Helping everyone while saving screen space

Breadcrumbs also help users with disabilities by giving everyone a predictable way to see where they are. Because the trail is one line of text, it’s a compact element that barely takes up room.

It’s less a second menu and more a signpost. Small space, big help.

How Breadcrumbs Help Your SEO

Breadcrumbs also support search engine optimization (SEO), helping search engines find and understand your pages.

How search engines map your site’s hierarchy

Every site has a hierarchy, its layers from homepage down to single pages. Breadcrumbs spell those layers out in plain links, so search engines and their crawlers (automated visitors that read your pages) can see how everything relates.

Picture a bakery owner whose wedding cake page sits three clicks deep. A trail reading Home, Weddings, Tiers shows the search engine where it belongs. Small clues add up.

According to Search Engine Land’s guide to SEO breadcrumbs, breadcrumbs can help search engines discover pages for indexing (saving them for search results) sooner. The trail’s links also improve crawl discovery, meaning crawlers find more of your pages.

Passing link value through internal links

Each breadcrumb is an internal link between two pages. These spread link equity, the ranking value that moves between pages, up toward your category pages.

Those links also reinforce your hierarchy. It’s less about how many links you add and more about where they point.

Show the current page as plain text, not a link. Linking to itself adds nothing.

Marking up trails for search result snippets

Schema markup is hidden code that labels what each part of a page means. For breadcrumbs, the label is BreadcrumbList, usually written as JSON-LD (JavaScript Object Notation for Linked Data).

Once you’ve added it, the trail can appear in your search snippet (the listing shoppers see), showing the path before they click. Without it, Google builds a trail from your page’s web address (URL) instead.

Validate the markup with a testing tool to catch typos.

Here’s a three-level example to adapt:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Weddings", "item": "https://www.example.com/weddings/" },
    { "@type": "ListItem", "position": 3, "name": "Tiers" }
  ]
}

Are Breadcrumbs Necessary for a Website?

Are breadcrumbs necessary? Not for every site. A breadcrumb trail is the row of links at the top of a page, like Home > Candles > Soy Candles, and it helps only when visitors can land deep inside a site.

Sites that benefit most from breadcrumbs

Breadcrumbs shine on sites with multi-level hierarchies, where content sits in folders inside folders. Picture a first-time candle shop owner sorting products into Home, then Candles, then Soy Candles.

A shopper who lands on one jar from a search can click Candles and get back to the category in one tap.

E-commerce and news sites are the clearest cases, with layered categories and sections. Complex multi-layer sites work the same way: the more layers a visitor can fall into, the more the trail helps.

Quick test: count the clicks from your homepage to your deepest page. Three or more levels, and breadcrumbs are worth adding. Two or fewer, and you’ll probably skip them.

When a site can skip breadcrumbs

Not every site needs them. A small flat site, like a five-page portfolio, gains little from a trail that repeats the menu. A simple linear blog with no categories has no hierarchy for breadcrumbs to reveal.

Pages with multiple parents are trickier. IMDb is a well-known case: one title can sit under more than one listing, so a single trail shows only one route.

Before you add them, check user behavior. The question isn’t whether your site is big, but how people move through it. If visitors get lost or keep backing out of deep pages, breadcrumbs may help.

If they find things easily, you can skip them. Let behavior decide.

Tips for Designing Breadcrumbs Well

A breadcrumb trail only helps if people notice it and understand it, so it’s about being easy to find without getting in the way.

Placing trails near the top, clearly visible

Place your trail directly below the main navigation, where readers already look for their bearings. Pick a contrasting color and a clear, readable font, then keep the styling subtle and unobtrusive: the trail should guide, not decorate.

For example, a florist selling wreaths online can put the trail just under the menu. A shopper who lands on a winter wreath sees Home > Wreaths > Winter and returns to the category in one tap instead of digging through the whole shop.

Choosing which levels and labels to show

Show only the essential levels, the ones that tell someone where they are, and skip any that just repeat the page above. Less is more.

Use descriptive labels that match page titles word for word, so nothing surprises the reader. Pick one delimiter, the separator symbol such as >, and use it everywhere. Show the current page as plain text, not a link, since clicking it goes nowhere.

Keep the style steady and test it

Consistency builds trust, so use the same style and location on every page. Test it with real people before launch. A retired teacher starting a blog could ask her sister to find last month’s gardening posts, then note where she hesitates.

That pause shows which label needs renaming. Test across devices too, since a trail that fits a laptop may wrap awkwardly on a phone. Plan your site structure first, since a trail is only as clear as the hierarchy beneath it.

Making trails accessible to everyone

Accessibility isn’t a bonus. It helps everyone find their way. Build these in from the start:

• ARIA labels. Add ARIA (Accessible Rich Internet Applications) labels so screen readers, the tools that read pages aloud, announce the trail as navigation.
• Contrast ratios. Check the gap in brightness between text and background so readers with low vision can still read every step.
• Large touch targets. Give each link enough tappable space that a thumb lands on the right one.

Small details, big payoff.

Setting up Breadcrumbs on Your Site

Your path depends on what you’re building on, so we’ll start there. Mapping comes last below, but it’s worth doing first.

Adding breadcrumbs with WordPress and Yoast

On WordPress, a plugin (an add-on that adds features) can handle the trail for you.

• Yoast plugin settings. Switch breadcrumbs on in the plugin’s settings.
• Add code to theme. If your theme has no spot for them, paste in Yoast’s snippet (back up first).
• Yoast breadcrumb block. Prefer no code? Drop the block onto any page.
• Other plugins available. Compare their settings before you commit.
• Check theme for built-in breadcrumbs. Some themes already include them. Look before you install, since you want one trail, not two.

Building breadcrumbs by hand in code

Building by hand means writing the trail yourself with HyperText Markup Language (HTML) for structure, Cascading Style Sheets (CSS) for looks, and JavaScript for extra behavior. It requires developer skills.

On Wix, Squarespace or Webflow, Yoast won’t apply, so check your builder’s settings for a breadcrumb option first.

Writing the trail is the quick part. Making it work everywhere is the real job, so test in several browsers and on a phone.

Mapping your structure before adding markup

• Map site structure first. List your main sections and the pages under each.
• Add microdata or schema. These labels tell search engines where each page sits. Some plugins add them for you, so check first.
• Sitemap planning. A sitemap lists every page on your site, so use it to confirm each one has a trail back up.

Think of a bakery with a Wedding Cakes page under its Cakes page. Mapping that first means the trail leads customers back to Cakes, not into a dead end.

Designing Breadcrumbs for Small Screens

A trail that looks tidy on your laptop can turn jumbled on a phone. Plan for the small screen first so it stays useful.

How mobile trails differ from desktop

On desktop, a breadcrumb trail can show every level, like Home > Shop > Candles > Soy Candles. Phones have far less width, so most mobile versions switch to a condensed trail that keeps only the levels a visitor needs most. Mobile needs the short version.

Icons do some of the work too. A small house in place of the word Home saves room.

Picture a florist whose shop has a Mother’s Day bouquet page three levels deep. On a phone, the trail shows just the parent level, Seasonal, so that link is easy to tap.

Ways to save space on mobile

Four moves keep a trail readable:

• Show only the parent level. Link back one step, not the full path.
• Use a single-line trail. Wrapped trails crowd the page.
• Truncate long labels. Cut the end with an ellipsis, the ”…” that signals cut text, so Handmade Ceramic Dinnerware becomes Handmade Ceramic…
• Use horizontal scroll with cues. Let the trail run past the edge, with a faded edge or arrow showing there’s more to swipe.

Mistakes to avoid on mobile trails

Watch out for these five:

• Overcomplicated trails. Too many levels are hard to read on a phone.
• Non-responsive design. A trail that doesn’t adjust to screen size gets cut off or squeezed.
• Small touch targets. Links need a big enough tappable area, since tiny ones are easy to miss with a thumb.
• No scroll indication. Without a hint, readers may never know the trail runs off the edge.
• Inconsistent style. Mixed fonts, colors, or separators make the trail look borrowed from another site.

Check it on a real phone, not just a shrunken browser window.

Breadcrumbs are a small detail with a real payoff. They show visitors where they are, make it easy to climb back up your site, and help search engines see how your pages connect. Keep them readable on a phone, too.

You don’t need to be a developer to add them. Whether you’re building on Wix, Squarespace, Webflow or WordPress, you can start with a simple trail and fine-tune it as your site grows.

A clear trail turns a lost visitor into a curious one.

References

1. Report on the Development of Breadcrumbs Navigation Feature in EPrints — doi.org (2019)
2. Breadcrumb Navigation Deployment in Retail Web Sites — doi.org (2019)
3. SEO breadcrumbs: Structure, benefits & best practices — searchengineland.com (2025)
4. Navigation Breadcrumb Law in UX Design — uxuiprinciples.com (2025)