What Are WordPress Breadcrumbs? A UK Guide

This post may contain affiliate links. If you make a purchase through these links, we may earn a commission at no additional cost to you.

Ever found yourself wandering through a massive website, clicking deeper and deeper, until you’ve completely forgotten how you got there? It’s like being lost in a sprawling forest. You know the homepage is somewhere back there, but the path has vanished. This is where a clever little tool, inspired by a classic fairy tale, comes to the rescue: breadcrumbs.

If you’ve ever used a WordPress website, you’ve almost certainly seen them. They’re that little line of links, usually tucked away at the top of a page, that looks something like this:

Home > Blog > Tech Guides > What Are Breadcrumbs?

They might seem small and insignificant, but these digital trails are one of the most powerful, yet often overlooked, features you can add to your website. They are your user’s trusty map and your search engine’s friendly guide, all rolled into one.

In this definitive guide, we’re going to explore everything there is to know about WordPress breadcrumbs. We’ll cover what they are, why they’re absolutely brilliant for both your visitors and your site’s ranking on Google, and, most importantly, show you step-by-step how to add them to your own WordPress site. So, pop the kettle on, get comfortable, and let’s follow the trail.

Once Upon a Time… What Exactly Are Breadcrumbs?

Remember the story of Hansel and Gretel? Two children lost in the woods, leaving a trail of breadcrumbs behind them so they could find their way home. Website breadcrumbs work on the very same principle. They are a secondary navigation system that shows users their exact location within your website’s hierarchy.

Think of your website like a huge department store, say, John Lewis. You walk in on the ground floor (your Homepage). You take the escalator up to the second floor, into the ‘Home & Garden’ section (Category). You then walk over to the ‘Kitchenware’ aisle (Sub-category) and finally stop in front of the coffee machines (Product Page).

A breadcrumb trail would show that exact journey:

Home > Home & Garden > Kitchenware > Nespresso Coffee Machines

Each step in that trail, apart from the final one, is a clickable link. If you decide you want to look at all kitchenware, not just coffee machines, you can simply click ‘Kitchenware’ to go back one level. It’s an instant, intuitive way to understand where you are and how to get back to where you came from.

This simple trail prevents your visitors from feeling lost and frustrated, which is one of the quickest ways to make them click the dreaded ‘back’ button and leave your site for good.

Why Should You Care? The Two Big Wins of Breadcrumbs

Adding breadcrumbs to your site isn’t just a nice-to-have feature; it’s a strategic move that delivers two huge benefits. It helps your human visitors and the robot visitors from search engines like Google.

Win #1: They Make Your Visitors Happy (Better User Experience – UX)

A happy visitor is one who stays longer, explores more pages, and is more likely to buy your product or subscribe to your newsletter. Here’s how breadcrumbs improve their experience:

They show people where they are. This is the most obvious benefit. Breadcrumbs provide instant context. On a large site with hundreds of pages, this is an absolute godsend. It immediately answers the question, “Where on earth am I?”
They offer a one-click way to go back. Instead of hitting the browser’s back button multiple times, a user can instantly jump back to a higher-level category page. This convenience is a small thing that makes a big difference.
They reduce bounce rate. A “bounce” is when a user lands on a page and leaves without visiting any others. If a visitor lands on a blog post from Google but it isn’t quite what they were after, a breadcrumb trail like Home > Blog > Marketing Tips might encourage them to click on ‘Marketing Tips’ to see what else you have, rather than just leaving.
They don’t take up much space. Unlike a bulky navigation menu, breadcrumbs are a simple, horizontal text trail. They provide maximum navigational benefit for a minimal amount of screen space.

Imagine navigating the GOV.UK website without them. It’s a gigantic site with a deep, complex structure. Breadcrumbs are essential for helping citizens find their way from broad topics like ‘Benefits’ down to the specific form they need to fill in.

Win #2: They Make Google Happy (Better Search Engine Optimisation – SEO)

Google’s main job is to understand websites and present the most relevant results to users. Breadcrumbs make that job much, much easier.

They help Google understand your site structure. Search engine crawlers (or ‘spiders’) use links to discover and index your pages. Breadcrumbs provide a crystal-clear map of how your content is organised. This helps Google to understand the relationship between your pages and the overall hierarchy of your site.
They can appear in search results. This is a huge bonus. Google often shows breadcrumb trails directly in its search results pages, replacing the page’s URL.Instead of seeing this: www.yourwebsite.co.uk/category/seo/2025/09/an-article-title/A user might see this: www.yourwebsite.co.uk > SEO > An Article TitleThis is cleaner, easier to understand, and tells the user exactly where the page fits into your site before they even click. This can significantly increase your click-through rate.
They build internal links. Every breadcrumb link is an internal link. This helps spread ‘link equity’ (or ranking power) throughout your site, which can give your overall SEO a gentle boost.

In short, breadcrumbs are a rare win-win. They improve usability for people and provide contextual clues for search engines. It’s one of the simplest and most effective improvements you can make to your site’s structure.

The Different Flavours of Breadcrumbs: Not All Trails Are the Same

While the concept is simple, there are a few different types of breadcrumbs. The one you choose depends on the type of website you have.

Hierarchy-Based Breadcrumbs: The Classic Choice

This is the most common and, in most cases, the most useful type of breadcrumb. It shows the user where they are within the site’s structure, starting from the homepage and leading to their current page.

Example: Home > Our Services > Web Design > Portfolio

This type is perfect for most websites, from blogs to corporate sites, where you have a clear, pre-defined structure of categories and sub-pages.

Attribute-Based Breadcrumbs: The Shopper’s Friend

You’ll see this type most often on e-commerce websites. Instead of showing the page hierarchy, the trail is made up of the product attributes or filters the user has selected.

Imagine you’re shopping for a new pair of trainers on a site like JD Sports. Your breadcrumb trail might look like this:

Example: Home > Men's > Footwear > Trainers > Size: 9 > Colour: Black

This is incredibly useful for online shoppers as it allows them to easily remove a filter (like ‘Colour: Black’) to broaden their search again, without having to start from scratch.

History-Based Breadcrumbs: The Path You Trod

This is the least common type, and for good reason. It shows the exact path of pages the user has clicked through to get to their current location.

Example: Home > About Us > Our Team > Homepage > Blog > Current Article

As you can see, this can get messy and confusing. It simply duplicates the function of the browser’s ‘back’ button and doesn’t tell the user anything about the site’s structure. Generally, it’s best to avoid this type unless you have a very specific reason for using it. For 99% of WordPress sites, hierarchy-based breadcrumbs are the way to go.

How to Add Breadcrumbs to Your WordPress Site: A Practical Step-by-Step Guide

Right, let’s get down to business. Adding breadcrumbs to WordPress is thankfully much easier than it sounds. You don’t need to be a coding wizard. We’ll walk through the most common methods, from the super-simple to the slightly more advanced.

Before You Start: A Quick Check

First, it’s worth checking if your current WordPress theme has breadcrumbs built-in. Many modern themes do. The easiest way to check is to head to your WordPress dashboard, go to Appearance > Customise, and have a poke around the options. Look for sections called ‘Layout’, ‘Page Header’, ‘Blog’, or even a dedicated ‘Breadcrumbs’ section. If you find an option to enable them, you’re in luck! Just flick the switch, and you’re done.

If your theme doesn’t have a built-in option, don’t worry. Using a plugin is the next best thing and is incredibly easy.

Method 1: The Easy Route with an SEO Plugin

Most people using WordPress will have an SEO plugin installed to help them rank better on Google. The two most popular ones, Yoast SEO and Rank Math, both have excellent, easy-to-use breadcrumb features. If you’re already using one of these, this is the best method for you.

Using Yoast SEO

Yoast is one of the most popular WordPress plugins of all time. Here’s how to set up its breadcrumbs.

Enable the Breadcrumbs Feature:
- In your WordPress dashboard, go to Yoast SEO > Settings.
- Scroll down to the ‘Advanced’ section and click on Breadcrumbs.
- You’ll see a section called ‘Enable breadcrumbs for your theme’. Make sure this is switched On.
Configure the Settings:
- Once enabled, you can customise how your breadcrumbs look.
- You can change the separator (the symbol between links, like > or »).
- You can set the anchor text for the homepage (e.g., ‘Home’ or ‘Main Page’).
- You can also choose how to show the breadcrumb path for different types of content, like posts and pages. For most people, the default settings are perfectly fine.
- Don’t forget to Save changes.
Add the Breadcrumbs to Your Site:
- This is the step that trips some people up. Just enabling the feature in Yoast doesn’t automatically make the breadcrumbs appear. You need to tell WordPress where to display them.
- Yoast will ask you to add a small snippet of PHP code to your theme’s template files. The code looks like this:<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?>
- WARNING: Before you edit any theme files, it is absolutely crucial that you are using a child theme. If you edit your main theme’s files directly, your changes will be completely wiped out the next time the theme updates. Creating a child theme is a simple process and there are many guides online.
- You’ll typically want to add this code to your header.php file, just below the header section, or at the top of your page.php and single.php files to have them appear on pages and posts. Go to Appearance > Theme File Editor to find these files. Find the right spot, paste the code, and click Update File.

Using Rank Math

Rank Math is a fantastic alternative to Yoast and its breadcrumb setup is even simpler.

Enable the Breadcrumbs Module:
- In your dashboard, go to Rank Math > Dashboard.
- Make sure the Breadcrumbs module is turned On.
Configure the Settings:
- Head to Rank Math > General Settings > Breadcrumbs.
- Here you’ll find a wealth of customisation options, similar to Yoast. You can change the separator, show or hide the homepage link, and change the labels.
- The best part about Rank Math is its ‘auto-add’ feature. At the top of the settings, you should see a function that says “Add Breadcrumbs Code Automatically“. If you enable this, Rank Math will do its best to add the breadcrumbs to the right place on your site without you having to touch any code. This works for most modern themes.
- Save your changes.
If Auto-Add Fails (Using the Shortcode):
- If the automatic method doesn’t work, Rank Math gives you another super-easy option: a shortcode.
- You can simply paste the following shortcode directly into the content of any page or post where you want the breadcrumbs to appear: [rank_math_breadcrumb]
- This is great for adding them on a page-by-page basis. If you want them site-wide, adding the PHP code (just like with Yoast, but using Rank Math’s function) to your child theme’s template files is the better option.

Method 2: Using a Dedicated Breadcrumb Plugin

If you don’t use Yoast or Rank Math, or you want more powerful customisation options, a dedicated plugin is the way to go.

Breadcrumb NavXT: The Power User’s Choice

Breadcrumb NavXT is the undisputed king of breadcrumb plugins. It’s free, powerful, and gives you granular control over every aspect of your breadcrumb trails.

Install and Activate: Go to Plugins > Add New, search for “Breadcrumb NavXT”, and install and activate it.
Configure Settings: A new menu item will appear: Settings > Breadcrumb NavXT. The settings page can look a bit intimidating at first because there are so many options, but it’s logically laid out. You can create different breadcrumb templates for posts, pages, categories, tags, and more.
Add to Theme: Just like Yoast, you need to add a snippet of code to your child theme’s template files to display the breadcrumbs. The code is:<div class="breadcrumbs" typeof="BreadcrumbList" vocab="[https://schema.org/](https://schema.org/)"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div>

The main reason to use NavXT over an SEO plugin is control. If you need to create complex or highly customised breadcrumb trails, NavXT is the perfect tool for the job.

Method 3: Going Manual (For the Adventurous)

This method is for those who are comfortable with code and don’t want to add another plugin to their site. It involves adding a custom function to your functions.php file and then calling that function in your template files.

A Word of Warning: This is an advanced method. One wrong move in your functions.php file can break your entire website (the infamous “white screen of death”). Always back up your site before attempting this, and always use a child theme.

There are many great code snippets available online for creating custom WordPress breadcrumb functions. A quick search for “WordPress breadcrumb function php” will give you plenty of robust options to copy and paste into your child theme’s functions.php file.

Once the function is added, you would then call it in your other template files (like header.php or single.php) using a line of code like <?php the_breadcrumb(); ?>.

Making Them Look Good: Styling Your Breadcrumbs with CSS

Once your breadcrumbs are working, you might want to tweak their appearance to better match your website’s design. This is done using CSS (Cascading Style Sheets).

You can add custom CSS to your site by going to Appearance > Customise > Additional CSS.

Finding the Right CSS Selectors

First, you need to figure out what CSS ‘selectors’ (the names of the elements) your breadcrumbs are using.

Go to a page on your site where the breadcrumbs are visible.
Right-click on the breadcrumb trail and select Inspect.
This will open your browser’s developer tools. You’ll see the HTML code for the breadcrumbs. Look for the class or ID of the main container. It will likely be something like id="breadcrumbs" (for Yoast) or class="rank-math-breadcrumb" (for Rank Math).

Simple CSS Tricks for a Tidy Trail

Here is some example CSS you can adapt. Let’s assume your breadcrumbs are wrapped in a <p> tag with an ID of breadcrumbs, like the Yoast example.

/* --- Basic Breadcrumb Styling --- */

/* Target the main breadcrumb container */
#breadcrumbs {
    font-size: 14px; /* Make the font a bit smaller */
    color: #555555; /* A nice dark grey colour */
    margin-bottom: 20px; /* Add some space below */
}

/* Target the links within the breadcrumbs */
#breadcrumbs a {
    color: #0073aa; /* A standard blue for links */
    text-decoration: none; /* Remove the underline */
}

/* Change link colour on hover */
#breadcrumbs a:hover {
    color: #000000; /* Darken the link on hover */
    text-decoration: underline; /* Add an underline on hover */
}

/* Target the separator (if it's not an image) */
#breadcrumbs .separator {
    margin: 0 8px; /* Add some space either side of the separator */
}

You can paste this into your ‘Additional CSS’ panel and tweak the values for colours, font sizes, and spacing until you’re happy with the result.

Breadcrumb Best Practices: The Dos and Don’ts

To get the most out of your breadcrumbs, follow these simple rules.

Do start the trail from the homepage. This provides a constant, reliable starting point for your users.
Do use a simple, clean separator. The greater-than sign (>) is the most common and universally understood. Other good options are the double-angle bracket (») or a slash (/).
Do make the last item in the trail the title of the current page. This item should be plain text, not a link, as it makes no sense to have a link to the page you’re already on.
Don’t use breadcrumbs as a replacement for your main navigation menu. They are a secondary, convenience-based navigation system, not the primary one.
Don’t clutter the design. Breadcrumbs should be helpful but subtle. They shouldn’t be the most prominent thing on the page.
Don’t forget about mobile users. Make sure your breadcrumb trail doesn’t wrap onto multiple lines or take up too much valuable screen space on smaller devices. You may need to use CSS to make the font size smaller on mobile.

The Secret Sauce for SEO: Breadcrumb Schema Markup

This sounds technical, but it’s the magic that helps Google show your breadcrumbs in the search results.

What is Schema Markup?

In simple terms, Schema Markup is a special vocabulary of code that you can add to your website’s HTML. It doesn’t change how your site looks to humans, but it gives search engines extra information and context about your content.

Think of it like this: You write “Big Ben” on a page. A human knows it’s a famous landmark in London. A search engine just sees two words. By adding schema markup, you can explicitly tell Google, “This isn’t just text; this is a Tourist Attraction, located in London, with these opening hours.”

How it Works for Breadcrumbs

There’s a specific type of schema called BreadcrumbList. This markup clearly labels your breadcrumb trail for search engines, defining each link, its URL, and its position in the sequence.

Here’s a simplified example of what the code (in a format called JSON-LD) looks like:

{
  "@context": "[https://schema.org](https://schema.org)",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "[https://example.com/books](https://example.com/books)"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Science Fiction",
    "item": "[https://example.com/books/science-fiction](https://example.com/books/science-fiction)"
  }]
}

Good News: Your Plugin Does This For You!

Feeling a bit overwhelmed by that code? Don’t be. The best part is that you almost never have to write this yourself.

All the plugins we’ve discussed—Yoast SEO, Rank Math, and Breadcrumb NavXT—automatically generate this structured data for you behind the scenes. It’s one of their most valuable features. By simply enabling their breadcrumb functions, you are also enabling the schema markup that Google needs.

You can check if it’s working correctly by taking a URL from your site and pasting it into Google’s Rich Results Test tool. It will scan your page and tell you if a valid BreadcrumbList was found.

Common Problems and How to Fix Them

Even with a simple setup, things can sometimes go awry. Here are a few common hiccups.

“My breadcrumbs aren’t showing up!”
- The Fix: This is usually a two-part problem. First, double-check that you have actually enabled the breadcrumb feature in your plugin’s settings. Second, ensure you have correctly added the PHP code snippet or shortcode to your theme files or pages. It’s easy to forget the second step!
“The path is wrong! It’s showing the wrong category.”
- The Fix: Breadcrumbs reflect your site structure. If the trail is wrong, it’s likely your content structure is wrong. For a blog post, check that it has been assigned to the correct primary category in the WordPress editor. For a page, check that you have set the correct Parent Page in the ‘Page Attributes’ section of the editor.
“They look a mess on my phone!”
- The Fix: This is a styling issue that requires a bit of CSS. You’ll need to use a ‘media query’ to apply specific styles only for smaller screens. For example:@media (max-width: 600px) { #breadcrumbs { font-size: 12px; /* Make font even smaller on mobile */ } }

Conclusion: Why These Little Crumbs Are a Mighty Tool

It’s easy to get caught up in complex marketing strategies and cutting-edge design trends, but sometimes the simplest changes have the biggest impact. Breadcrumbs are a perfect example.

This small, unassuming line of text is a powerhouse of usability and SEO. It provides clarity for your users, helping them navigate your site with confidence and ease. At the same time, it hands search engines a clean, logical map of your content, helping them to understand and rank your site more effectively.

Whether you choose a simple toggle in your theme, the powerful features of an SEO plugin, or a dedicated tool like Breadcrumb NavXT, implementing breadcrumbs is a quick task that will pay dividends for years to come. You’re not just adding a line of links; you’re building a smarter, more user-friendly, and more search-engine-friendly website. You’re leaving a clear trail for everyone to follow.

The Guide to WordPress Breadcrumbs: Your Website’s Digital Compass