There are many tools and methods used to improve the user experience and navigation of websites. One of these tools is breadcrumb navigation. Breadcrumb helps users understand where they are in the website and how to reach other pages. In this article, we will explore what breadcrumb is, how it is implemented and the advantages it provides.
What is Breadcrumb?
Breadcrumb is a navigation element on websites that shows the location of the page the user is on and the top-level categories of the page. It takes its name from the fairy tale of Hansel and Gretel, where the children leave breadcrumbs to find their way back. Breadcrumb is usually located horizontally at the top of the page, making it easy for users to navigate back through the site.
Breadcrumb Types
Hierarchical Breadcrumb
Hierarchical breadcrumb shows the hierarchical structure in which the user’s current page is located. This type of breadcrumb shows users which category they are in and how to get back to the parent categories.
- Example: Home > Category > Subcategory > Current Page
Attribute Based Breadcrumb
Attribute-based breadcrumb is created based on the attributes the user selects for a particular product or page. This type of breadcrumb is commonly used on e-commerce sites.
- Example: Home > Men’s Clothing > Shoes > Sneakers
History Based Breadcrumb
A history-based breadcrumb keeps a record of the user’s path as they navigate through the site. This type of breadcrumb allows the user to easily return to previous pages.
- Example: Home > About Us > Services > Contact
Advantages of Breadcrumb
User Experience
Breadcrumb improves the user experience by helping users understand where they are in the site and how to return to the top pages. Users have the ability to navigate around the site without getting lost.
SEO Benefits
Breadcrumb can help search engines better understand the structure of your website. This can improve your site’s SEO performance and help you achieve better rankings in search engine results.
Ease of Site Navigation
Breadcrumb facilitates site navigation and allows users to quickly return to top-level pages or categories. This allows users to spend more time on the site and visit more pages.
How to Implement Breadcrumb?
Creating Breadcrumb with HTML
Creating a breadcrumb using HTML is quite simple. Below is an example of a simple HTML breadcrumb:
<nav aria-label=”breadcrumb”>
<ol class=”breadcrumb”>
<li class=”breadcrumb-item”><a href=”index.html”>Home</a></li>
<li class=”breadcrumb-item”><a href=”category.html”>Category</a></li>
<li class=”breadcrumb-item active” aria-current=”page”>Current Page</li>
</ol>
</nav>
Breadcrumb Styles with CSS
You can use CSS to beautify the breadcrumb created with HTML. Below is an example of a simple CSS breadcrumb style:
.breadcrumb {
list-style: none;
display: flex;
padding: 0;
}
.breadcrumb-item {
margin-right: 0.5em;
}
.breadcrumb-item a {
text-decoration: none;
color: #007bff;
}
.breadcrumb-item.active {
color: #6c757d;
}
Breadcrumb Dynamics with JavaScript
You can create dynamic breadcrumb using JavaScript. This is especially useful when your pages are dynamically generated.
// Example of dynamic breadcrumb creation
function createBreadcrumb() {
var breadcrumb = document.querySelector(‘.breadcrumb’);
var path = window.location.pathname.split(‘/’).filter(function (el) { return el.length != 0; });
var fullPath = ”;
path.forEach(function (segment, index) {
fullPath += ‘/’ + segment;
var li = document.createElement(‘li’);
li.className = ‘breadcrumb-item’;
if (index === path.length – 1) {
li.classList.add(‘active’);
li.setAttribute(‘aria-current’, ‘page’);
li.textContent = segment;
} else {
var a = document.createElement(‘a’);
a.href = fullPath;
a.textContent = segment;
li.appendChild(a);
}
breadcrumb.appendChild(li);
});
}
document.addEventListener(‘DOMContentLoaded’, createBreadcrumb);
Breadcrumb Usage in CMS Systems
Popular CMS systems offer plugins and tools that make breadcrumb usage easier. For example, the “Yoast SEO” plugin for WordPress makes adding breadcrumbs quite simple.
Things to Consider When Using Breadcrumb
Keeping it Clear and Concise
Keeping the breadcrumb clear and short improves the user experience. Complex and long breadcrumbs can mislead users.
Adding Home Page Link
Adding a link to the homepage at the beginning of the breadcrumb allows users to easily return to the homepage.
Using Suitable Separators
Separators (e.g. “>”, “/”, “|”) are used to separate the elements used in the breadcrumb. Appropriate separators should be chosen so that users can easily read the breadcrumb.
Mobile Compatible Design
Make sure breadcrumb works well on mobile devices too. Responsive design and mobile-friendly CSS ensure that breadcrumb looks good on every device.
Breadcrumb and SEO
Structured Data and Schema Markup
You can use schema markup to better promote breadcrumb to search engines. Below is an example of schema markup for breadcrumb:
<nav aria-label=”breadcrumb”>
<ol class=”breadcrumb” itemscope itemtype=”http://schema.org/BreadcrumbList”>
<li class=”breadcrumb-item” itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a href=”index.html” itemprop=”item”><span itemprop=”name”>Home</span></a>
<meta itemprop=”position” content=”1″ />
</li>
<li class=”breadcrumb-item” itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a href=”category.html” itemprop=”item”><span itemprop=”name”>Category</span></a>
<meta itemprop=”position” content=”2″ />
</li>
<li class=”breadcrumb-item active” aria-current=”page” itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<span itemprop=”name”>Curent Page</span>
<meta itemprop=”position” content=”3″ />
</li>
</ol>
</nav>
Breadcrumb Appearance in Search Engine Results
Breadcrumb can also appear on search engine results pages (SERPs) and help users better understand the structure of your site. This can increase click-through rates and improve your site’s visibility in search engines.
Frequently Asked Questions
What is Breadcrumb?
Breadcrumb is a navigation element on websites that shows the location of the page users are on and the top-level categories of the page.
What are breadcrumb types?
Breadcrumb types include hierarchical breadcrumb, attribute-based breadcrumb and history-based breadcrumb.
How to implement Breadcrumb?
Breadcrumb can be implemented using HTML, CSS and JavaScript. It can also be easily integrated with plugins and tools in popular CMS systems.
What are the advantages of using breadcrumb?
The advantages of using breadcrumb include improved user experience, SEO benefits and easier site navigation.
What is the relationship between Breadcrumb and SEO?
Breadcrumb can help search engines better understand the structure of your site. You can increase the SEO contribution of breadcrumb by using structured data and schema markup.
What should be considered in breadcrumb design?
Breadcrumb design should pay attention to factors such as keeping it clear and short, adding a link to the homepage, using appropriate separators and mobile-friendly design.