What It Is & How to Use It

What Is Breadcrumb Navigation?

Breadcrumb navigation is a trail of text links that shows users the path to the page that they are currently on. Which allows users to navigate to higher pages in the website’s hierarchy.

These links (or “breadcrumbs”) typically appear near the top of the page.

Here’s a breadcrumb navigation example from the men’s jeans page on Nordstrom:

Notice how the breadcrumb links follow the path to the page (/browse/men/clothing/jeans/):

Breadcrumb navigation gets its name from the Hansel and Gretel fairytale, in which characters create a breadcrumb trail so they can retrace their steps.

However, breadcrumbs don’t necessarily reflect the user’s journey to the page.

For example, a user may follow a direct link to the Nordstrom men’s jeans page. But they’ll still see the same breadcrumb menu.

What Are Breadcrumbs on a Website?

On a website, breadcrumbs are links that show the route to the page you’re on. Together, they make up the breadcrumb navigation.

For example, each of these are breadcrumbs:

The Benefits of Breadcrumb Navigation

Using breadcrumbs in website design can benefit user experience (UX) and SEO.

Generally, breadcrumbs navigation is more advantageous for sites with deep site architecture. Because it helps users navigate between multiple levels.

Breadcrumbs aren’t quite as useful on very small or flat sites....