Very Simple HTML CSS Breadcrumb Menu

Last Updated: September 27, 2023

Welcome to a tutorial on how to create a breadcrumb menu. If you want to add a breadcrumb menu to your website, there’s no need to use a “third-party plugin” or “framework”. It is actually very easy to create one using only pure HTML and CSS – Read on!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

BREADCRUMB MENU DEMO

 

HTML CSS BREADCRUMB MENU

All right, let us now get into the details of creating a breadcrumb menu with HTML and CSS.

 

TUTORIAL VIDEO

 

PART 1) THE HTML

breadcrumb.html
<nav class="breadcrumb red">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

Just sandwich the <a> links inside a <nav class="breadcrumb">.

 

 

PART 2) THE CSS – MECHANICS

breadcrumb.css
/* (A) WRAPPER */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
}
 
/* (B) ITEMS */
.breadcrumb a { text-decoration: none; }
 
/* (C) SEPERATOR */
.breadcrumb a::after { content: ">"; }
.breadcrumb a:last-child::after { content: ""; }
  1. display: flex will lay the menu items in a horizontal manner. flex-wrap is actually optional, it allows menu items to break into a new row.
  2. text-decoration: none to hide the ugly default “link underline”.
  3. Use a::after { content: ">"; } to insert a separator at the end of each menu item. Of course, the last item will not have a separator.

 

PART 3) THE CSS – COSMETICS

breadcrumb.css
/* (D) COSMETICS - THEMES */
/* (D1) GENERAL */
.breadcrumb, .breadcrumb * {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.breadcrumb {
  padding: 15px;
  border-radius: 10px;
}
.breadcrumb a { font-weight: 700; }
.breadcrumb a::after { padding: 0 10px; }
 
/* (D2) RED */
.breadcrumb.red { background: #ffe4e4 }
.breadcrumb.red a { color: #c53030; }
.breadcrumb.red a::after { color: #ffa9a9; }

The rest of the cosmetics is up to you to decide – Color, font, spacing, etc…

 

 

EXTRAS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

BREADCRUMB MENU SEO

For you guys who want to do some SEO for the breadcrumb menu, here are 3 possible ways to add structured data.

 

MICRODATA

<nav itemscope itemtype="https://schema.org/BreadcrumbList">
  <div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://site.com/">
      <span itemprop="name">Home</span>
    </a>
    <meta itemprop="position" content="1">
  </div>
  <div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://site.com/shop">
      <span itemprop="name">Shop</span>
    </a>
    <meta itemprop="position" content="2">
  </div>
</nav>

First, microdata is one of the most common ways to add structured data. You may have noticed that the HTML has changed… Well, that is kind of necessary to create a “valid rich result” structure.

 

JSON LD

<head>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Home",
    "item": "http://site.com"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Shop",
    "item": "http://site.com/shop"
  }]
}
</script>
</head>

Next, we have JSON-LD (JSON for linking data). Not going into the “boring details”, but just insert a <script type="application/ld+json"> into the <head> section, with all the breadcrumb menu items.

 

 

RDFA

<nav vocab="https://schema.org/" typeof="BreadcrumbList">
  <div property="itemListElement" typeof="ListItem">
    <a href="http://site.com" property="item" typeof="WebPage">
      <span property="name">Home</span>
    </a>
    <meta property="position" content="1">
  </div>
  <div property="itemListElement" typeof="ListItem">
    <a href="http://site.com/shop" property="item" typeof="WebPage">
      <span property="name">Shop</span>
    </a>
    <meta property="position" content="2">
  </div>
</nav>

Finally, we have RDFA (Resource Description Framework in Attributes). I don’t see this quite as often, but this is also valid and will be picked up by search engines.

 

DON’T OVER-OPTIMIZE!

Yes, it is good to add some data structure, that will help search engines to better understand your website. But don’t overdo it, that is a common mistake called “over-optimization”. Bloating your website full of microdata will not help you rank miraculously.

Structured data is not some “secret code to rank fast”… So between microdata, JSON-LD, and RFDA – Just use one. Even if you don’t implement any, search engines these days are smart enough to figure things out anyway.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *