Breadcrumb navigation examples

In this post, I will give you a few sample breadcrumb navigation that I built with HTML & CSS. You’ll also get the source code of each breadcrumb.

Breadcrumb navigation examples

Before we start writing any code, let’s see the breadcrumb examples first. After that, you can choose any style and grab its corresponding HTML & CSS.

You saw the live preview of the breadcrumbs above. These are the most used breadcrumb styles you will find on the internet.

HTML for the example breadcrumbs

<nav class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Web Development</a></li>
    <li>Flexbox</li>
  </ul>
</nav><!-- .breadcrumb -->
<nav class="breadcrumb breadcrumb2">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Web Development</a></li>
    <li>Flexbox</li>
  </ul>
</nav><!-- .breadcrumb2 -->
<nav class="breadcrumb breadcrumb3">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Web Development</a></li>
    <li>Flexbox</li>
  </ul>
</nav><!-- .breadcrumb3 -->
<nav class="breadcrumb breadcrumb4">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Web Development</a></li>
    <li>Flexbox</li>
  </ul>
</nav><!-- .breadcrumb4 -->
<nav class="breadcrumb breadcrumb5">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Web Development</a></li>
    <li>Flexbox</li>
  </ul>
</nav><!-- .breadcrumb5 -->
<nav class="breadcrumb breadcrumb6">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Web Development</a></li>
    <li>Flexbox</li>
  </ul>
</nav><!-- .breadcrumb6 -->

As you see in the above HTML, all the breadcrumbs markup is ultimately the same except for one additional class name. This is just to change the background-color and icon/arrow.

Make sure you don’t change/replace the <nav> tag with others. Changing the tag will still work but it’s always best practice to use the <nav> tag while you create any type of navigation menu. The search engines will better understand the context.

CSS for the example breadcrumbs

.breadcrumb {
  padding: 20px 15px;
  background-color: #E8EAED;
}
.breadcrumb ul {
  padding: 0;
  margin: 0;
}
.breadcrumb ul li {
  list-style: none;
  display: inline;
  text-transform: uppercase;
  font-size: 1rem;
}
.breadcrumb ul li::after {
  content: "\27E9";
  padding: 0 8px;
  color: #EA4335;
}
.breadcrumb ul li:last-child:after {
  content: "";
}
.breadcrumb ul li a {
  color: #4285F4;
  text-decoration: none;
  -webkit-transition: color 0.7s ease-in;
  transition: color 0.7s ease-in;
}
.breadcrumb ul li a:hover {
  color: #1459cc;
}
.breadcrumb2 {
  background-color: #dbffe5;
}
.breadcrumb2 ul li:after {
  content: "\27EB";
  color: #229342;
}
.breadcrumb2 ul li:last-child:after {
  content: "";
}
.breadcrumb3 {
  background-color: #fff0e0;
}
.breadcrumb3 ul li:after {
  content: "\00BB";
  color: #fa8f1e;
}
.breadcrumb3 ul li:last-child:after {
  content: "";
}
.breadcrumb4 {
  background-color: #def1ff;
}
.breadcrumb4 ul li:after {
  content: "\2192";
  color: #07b02e;
}
.breadcrumb4 ul li:last-child:after {
  content: "";
}
.breadcrumb5 {
  background-color: #ffe1db;
}
.breadcrumb5 ul li:after {
  content: "\2223";
  color: #ff3912;
}
.breadcrumb5 ul li:last-child:after {
  content: "";
}
.breadcrumb6 {
  background-color: #fff3bf;
}
.breadcrumb6 ul li:after {
  content: "\002F";
  color: #a88903;
}
.breadcrumb6 ul li:last-child:after {
  content: "";
}

In the above CSS, you see that I only changed background-color, and the arrow/icon. Other than that, all the breadcrumbs are nearly the same.

You need only one breadcrumb. Whatever you choose from the above examples, you need all the CSS that is associated with the.breadcrumb class. From there, you can choose any additional CSS for a specific breadcrumb for instance .breadcrumb3. If you chose the first example, you only need the CSS that is associated with .breadcrumb.

How to implement breadcrumb on WordPress websites?

There are numerous ways to add breadcrumbs on WordPress websites. To keep this post short & easy to digest, I will not go through all the possible ways.

From my personal observation, I saw that most people use an SEO plugin such as Yoast, Rank Math, All in One SEO, etc. Probably, you also use anyone of them. But if you’re not using it yet, you should do it.

Anyways, most WordPress SEO plugins already have a built-in breadcrumb. Below I will show you how to do it with the Yoast & Rank Math plugin.

Implement breadcrumb with Yoast SEO plugin

You need to copy the following PHP code and paste it on a specific theme file for example “single.php”

if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}

Make sure to paste the above code in between a PHP tag (<?php // paste code here ?>)

If you see that you’re already in a PHP block, then you don’t need to add the block again. Anyways, make sure what you’re doing. Otherwise, your site may not work until you fix the code and your website will show a “Syntax Error” publicly.

If you want to display the breadcrumb on pages, then you need to paste the code on “page.php”

Implement breadcrumb with Rank Math plugin

You need to follow the same process as I mentioned in the last section (Yoast). The only exception is the code.

After you logged in to your WordPress dashboard, navigate to “Rank Math – General Settings” and enable the breadcrumb function. And then copy & paste the following code to your theme file as mentioned in the last section.

if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs();

If you’re not in a PHP block, then make sure you paste the above code within a new block as you see below.

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

OR

<?php
  if(function_exists('rank_math_the_breadcrumbs')) {
    rank_math_the_breadcrumbs();
  }
?>

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview

Conclusion

Breadcrumbs help visitors to navigate a website properly. People know where exactly they are and how to switch back & forth.

Breadcrumb navigation also helps search engines to better understand the pages & their relationships.

Most importantly, it helps your visitors. In this post, I showed you a couple of breadcrumb navigation examples. Also, I gave you the code to implement breadcrumb navigation on your website.