Breadcrumb

What a breadcrumb is

A breadcrumb, or breadcrumb trail, is a small secondary navigation element that shows where the current page sits within the structure of a website. It usually appears as a horizontal row of links near the top of a page, such as Home > Services > Web Design. Each step is clickable except the last, which is the page you are currently on. The name comes from the fairy tale of Hansel and Gretel, who dropped breadcrumbs to find their way back.

The purpose is orientation. On any site with more than a handful of pages, visitors need to understand where they are and how to move up a level without hitting the back button repeatedly. A breadcrumb answers the silent question every visitor has: where am I, and how do I get somewhere broader from here. It is small, unobtrusive, and quietly one of the most useful navigation patterns in web design.

What breadcrumbs are for

Breadcrumbs earn their place by serving both the visitor and the search engine at once:

• Orientation: they show the page's position in the site hierarchy at a glance.
• Easy backtracking: users can jump up to a parent category in one click, without retracing steps.
• Lower bounce rates: a visitor who lands on a deep page from search can explore the wider category instead of leaving.
• SEO signals: breadcrumbs give search engines a clear map of how your content is organised.
• Richer search listings: Google often shows the breadcrumb path in results instead of a plain URL, which looks cleaner and more trustworthy.

In short, a breadcrumb improves the experience of a real person and, at the same time, helps a search engine understand your site. That double benefit is why they are a staple of good information architecture.

The three types of breadcrumb

Not all breadcrumbs work the same way, and choosing the right type matters. There are three common kinds. Hierarchy based breadcrumbs are the most common: they reflect the fixed structure of the site, showing the parent pages of the current page, as in Home > Blog > SEO. Attribute based breadcrumbs are used mainly on e-commerce sites and reflect the filters a user selected, such as Home > Shoes > Men > Size 42. History based breadcrumbs simply mirror the path the visitor took to arrive, like a browser history, though these are less useful and rarely recommended because they duplicate the back button.

For most websites, hierarchy based breadcrumbs are the right choice, because they describe the structure of the site rather than the individual journey of one visitor. They stay consistent no matter how the user arrived.

How breadcrumbs work technically

Visually, a breadcrumb is a simple list of links separated by a symbol, most often a greater than sign or a slash. Under the surface, though, a well built breadcrumb also carries structured data, using the BreadcrumbList schema from schema.org. This markup tells search engines exactly what each step in the trail represents and how the steps relate.

That structured data is what lets Google display the breadcrumb path directly in the search results, replacing the raw URL with a readable trail like bebranded.xyz > Services > SEO. It makes the listing more attractive and signals the site's organisation. In a platform like Webflow, breadcrumbs are typically built from CMS references, so a page automatically shows its true category, and the BreadcrumbList schema can be added so search engines pick it up.

Best practices for breadcrumbs

A few guidelines keep breadcrumbs helpful rather than cluttered. Place them near the top of the page, above the main heading, where users expect them. Keep them concise: show the path, not every possible label. Make every step except the current page a working link, and do not link the current page to itself. Use a clear separator so the hierarchy reads instantly. Match the labels to the actual page or category names so there are no surprises.

A couple of cautions apply. Breadcrumbs complement your main navigation, they never replace it. And on a very flat site of only a few pages, they add little value, so they matter most on sites with real depth, such as blogs, online stores, and content heavy sites with categories and subcategories.

Breadcrumbs at BeBranded

At BeBranded, we add breadcrumbs to sites with meaningful depth because they improve both usability and SEO for essentially no downside. When we build a Webflow site with a structured blog, a glossary, or a service catalogue, breadcrumbs are generated from the CMS structure so each page reflects its true place in the hierarchy, and we pair them with BreadcrumbList structured data so Google can show the trail in search results.

The effect is subtle but real: visitors orient themselves faster and explore more of the site, while search engines get a clean map of how everything connects. On our own glossary, for example, every term carries a breadcrumb back to the glossary hub and the relevant pillar, which reinforces the topical structure that both users and search engines rely on. It is a small design detail that quietly strengthens navigation, SEO, and trust at the same time.