Add breadcrumbs in html and Static website

Sarmad Gardezi

Breadcrumb is the additional navigational structure used to help the users navigate to the up level of the site easily from the current page. It also provides the relative position of the current page among the whole site something like a “You are Here!” pin board in the map. HTML / Static websites does not offer default breadcrumb element to add it on your site but here we will show you five different CSS styles breadcrumbs which you can add to your static site.

Prerequisite for Breadcrumbs

Before i start i want to tell you that why we need breadcrumbs in our website. The prerequisite for a breadcrumb is to keep your pages in a structured manner. Though there is no need of arranging pages as per the breadcrumb we strongly recommend to do maintain the needed hierarchy under the “Pages” tab and align your navigation accordingly.

Lets See how breadcrumbs for the website looks like

Here, you can see that the whole link is optimized in just there useful words. That exactly the breadcrumbs are. The current page you are reading is located in this site with the structure as “Home > Site Building >Blog > Category > This Page”. Now we need three blocks with corresponding links to create a breadcrumb.

How To Create a Breadcrumb Navigation

A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user’s current location in a website.

<nav id="breadcrumb"><a href="#1">Home</a>
<a href="#2">Category</a>
<a href="#3">tag</a>
<a href="#4">Page Title</a></nav>

Note: It depends how many links you need in your breadcrumbs like if you have just HOME>Category>Post then use just 3 nav.

Now add the CSS Style and design them to make them look more impressive & productive.

/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;

/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";

/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: under

This is the easy way to add but if you find this method more workout then you can try my JavaScript and it will fetch your breadcrumbs automatically.

<script language="JavaScript">

//Bread crumb script - Sarmad Gardezi
//Visit JavaScript Kit ( for script

var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" / ";
var url = window.location.protocol + "//" + path;

Just place this code where u want to fetch your breadcrumbs and the JS code will work automatically. This is very easy way and it will take 24 hours to render & then you can see your results in google. In this way you can easily add breadcrumbs in your html or static website.

Breadcrumbs Boost SEO

If your website have breadcrumbs then Google in index your website more fast then before because if you follow the structure of google then their would be more change to get your blog posts in front page of google search.

More great articles

How to Disable Jetpack image Sitemaps from WordPress

Sitemaps are files that list each post and page that should be indexed by search engines like Google or Bing.…

Read Story

Use Formula to Copy Row Dynamically in Google Sheet

This tip is one of the most challenging Tip I've shared but it's worth the effort to learn. The index…

Read Story

The Best Websites to Learn Coding Online in Pakistan

Pakistan is now playing an impotent role in the developing field of IT. Many students starts their work by becoming…

Read Story