How To Create a Breadcrumb Navigation

Building a navigation tool that assists users in understanding where they are in the hierarchy of the website is known as creating breadcrumbs for a website. Here’s a detailed tutorial on making breadcrumbs:

Already we have knew the different types of menu using HTML, CSS and Javascript.

Table Of Contents

How To Create a Breadcrumb Navigation

Define the structure

Establish the hierarchy and structure of your website. Decide which parts and subsections will be the major focus of your breadcrumbs.

HTML structure

Make the breadcrumbs’ HTML structure. Using an unordered list<ul> or an ordered list<ol> is a typical method.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/category">Category</a></li>
    <li class="breadcrumb-item active" aria-current="page">Subcategory</li>
  </ol>
</nav>

The element <nav aria-label=”breadcrumb”> is utilized to specify a section for navigation. Screen readers can more easily comprehend that this navigation is for breadcrumbs thanks to the aria-label=”breadcrumb” feature.

The <ol class=”breadcrumb”>:The breadcrumb items are in this sorted list, which has the breadcrumb class applied to it.

This is <li class=”breadcrumb-item”>: Every breadcrumb has a class breadcrumb-item and is a list item(<li>).

<a href=”/”>Home</a>: The homepage is linked to by the Home breadcrumb.

<li class=”breadcrumb-item active” aria-current=”page”>Subcategory</li>:To identify the current page, the final breadcrumb item has the aria-current=”page” property set to “active.”

CSS styling

Customize the breadcrumbs to match the style of your website. Here’s an illustration of simple styling:

.breadcrumb {
  list-style: none;
  display: flex;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
  color: #ccc;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}

.breadcrumb-item.active {
  color: #6c757d;
}

The breadcrumbs are styled by CSS to provide a pleasing visual appearance. The CSS code and explanation are as follows:

.breadcrumb: This class shows the list items in a flex container and removes the default list style.

.breadcrumb-item + .breadcrumb-item::before: a > separator is added by this selector between the breadcrumb items. It employs: provides padding and color before inserting the content.

.breadcrumb-item a: This class sets the text color and eliminates underlining from the breadcrumb links.
The active breadcrumb item is The current page, or active breadcrumb, is styled by this class, which also modifies its color to suggest that it is not a link.

Live Example (HTML and CSS)

See the Pen
breadcrumbs by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.

Javascript (Optional)

JavaScript can be used to generate dynamic breadcrumbs that adjust according to the user’s navigation.

document.addEventListener("DOMContentLoaded", function () {
  const breadcrumb = document.querySelector(".breadcrumb");
  const path = window.location.pathname.split("/").filter(Boolean);
  let breadcrumbHTML = `<li class="breadcrumb-item"><a href="/">Home</a></li>`;
  let href = "/";
  
  path.forEach((segment, index) => {
    href += `${segment}/`;
    if (index === path.length - 1) {
      breadcrumbHTML += `<li class="breadcrumb-item active" aria-current="page">${segment}</li>`;
    } else {
      breadcrumbHTML += `<li class="breadcrumb-item"><a href="${href}">${segment}</a></li>`;
    }
  });

  breadcrumb.innerHTML = breadcrumbHTML;
});

Using document.addEventListener(“DOMContentLoaded”, function () {… }) guarantees that the script executes following the complete loading of the DOM.

By using document.querySelector(“.breadcrumb”);, the breadcrumb container is chosen.

The current URL route is divided into parts and empty segments are filtered out using the formula const path = window.location.pathname.split(“/”).filter(Boolean).

Allow breadcrumbs toHTML =<a href=”/”><li class=”breadcrumb-item”>Home</a></li>;: This adds the Home link to the breadcrumb HTML initialization.

let href = “/”;: As we construct the URL, this variable records the current URL.

path.forEach ((segment, index) => {… }): This loops through every segment of the path.

href += ${segment}/;: The URL is now updated.

If index is equal to path.length – 1, {… } otherwise {… }: Designate it as active if this is the final piece. If not, make a link to the section.

breadcrumb.innerHTML = breadcrumbHTML;: This adds the created HTML to the breadcrumb container.

Implement Schema Markup (Optional)

You can use JSON-LD for breadcrumbs to add structured data to boost SEO.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Category",
      "item": "https://www.example.com/category"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Subcategory",
      "item": "https://www.example.com/category/subcategory"
    }
  ]
}
</script>

Selecting a <script type = “application/ld+json”>: JSON-LD structured data is present in this script tag.

“@context” : “http://schema.org” , “@type” : “BreadcrumbList” , “itemListElement” : [… ]: The breadcrumb list is defined by this.

With regard to position, name, and item (URL), every ListItem object is a representation of a breadcrumb.

Include these elements on your webpage. Modify the scripts and styles to fit the demands and look of your website. The fundamental structure and design are provided by HTML and CSS, while JavaScript has the ability to dynamically create breadcrumbs based on the URL. Because it makes the breadcrumb structure easier for search engines to grasp, the optional schema markup enhances SEO.

How To Create a Breadcrumb Navigation