Breadcrumbs on a website serve the same purpose to users as they did in the classic children's tale where the children's dropped bread crumbs to find their way back home.
What is a breadcrumb
A breadcrumb (or breadcrumb trail) is like a secondary navigation scheme that helps users to understand where they are on the website.
If necessary, the breadcrumb helps the user to get back to a higher page in the structure, all the way back to the home page.
The elements in the breadcrumb are usually separated by the symbols ">" or "/".
Although their is no functional difference in the separators symbol and any symbol is possible as separator, it's recommended to use the ">" character.
Sometimes you find in front of the breadcrumb something like "You are here", this has also no function and is not necessary.
The breadcrumb trail starts with the home page and the last element is the current page.
All the elements are clickable except for the last one.
Breadcrumb types
While browsing through different types of website, you'll notice that there are different types of breadcrumbs.
In general, breadcrumbs can be grouped in following types:
- Hierarchy-based breadcrumb
- Dynamic or attribute-based breadcrumbs
- Drop-down navigation breadcrumbs
- History based breadcrumbs
Hierarchy-based breadcrumb
Hierarchy-based breadcrumbs are the most used on websites. They show users the trail all the way up to the home page.
They let the users easily navigate to a page or even several pages higher in the website structure.
A hierarchy-based breadcrumb typically looks like this:
Homepage > page on level 1 > sub page on level 2 > lower sub page on level 3
Attribute-based breadcrumbs
Attribute-based breadcrumbs are mostly seen on e-commerce site.
The breadcrumb trail shows the product attributes.
An attribute-based breadcrumb typically looks like this:
Homepage > product category > gender > size > color
Drop-down navigation breadcrumbs
Drop-down breadcrumbs are mostly used on very big websites.
The breadcrumb trail is not only showing you where you are in the structure of the website, but has also a drop-down navigation option.
This type of breadcrumb can be used for a hierarchy- as a attribute-based breadcrumb.
History based breadcrumbs
History based breadcrumbs shows you the previous page of where you have been on the website. The pages aren't necessarily connected directly to each other.
This type of breadcrumb works the same way as the history function in the browser.
When is a breadcrumb necessary
It's not necessary to place a breadcrumb when your website:
- has only 1 level (one-pager)
- has only 2 levels and you can clearly see in the main menu where you are
- only exist out of landing pages
It's recommended to place a breadcrumb when your website exist out of multiple levels. In that case it's best to place a hierarchy-based breadcrumb.
Breadcrumbs are especially helpful in large websites for the users who came from the SERP and aren't familiarly with your website structure.
Best place on the page for the breadcrumb
When you choose the position of the breadcrumb you should first consider if it would have an added value to the user experience.
In some cases when the styling of the menu is clear enough to see where you are in the website structure, it's not necessary to have the breadcrumb in the top half of the page.
The most common position for a breadcrumb is in the top half of the page below the main menu.
But when the breadcrumb doesn't have any added value for the UX, then it's more then enough to have the breadcrumb in the footer.
Breadcrumbs for seo
Breadcrumbs aren't only helpful for the users who visit your website, but they are also good for your seo.
A good structured breadcrumb trail can:
- reduce the crawl time
- optimize the SERP snippet
- reduce the bounce rate
Breadcrumbs reduces the crawl time
Search engines loves a good structured breadcrumb trail!
A correct structured breadcrumb makes it easier for search engines to figure out how your website is structured.
Because of that, the search engine will need less time to crawl through your entire site.
Breadcrumbs optimize the search result snippet
Google even uses good structured breadcrumbs in the SERP snippets.
To increase the chances of your breadcrumbs showing up in the search results, you need to add structured data to your page.
Breadcrumbs reduces the bounce rate
The chance that a user bounce is higher when a user reaches a page of your website through the SERP that they aren't interested in or doesn't contain the info that they where looking for.
A good structured breadcrumb encourage the user to stay on the website and look for the correct info instead of going back to the SERP.
Best practices for breadcrumbs on desktop
If we take usability and seo in consideration, then we can say that the best practices for breadcrumbs are:
- The breadcrumb should not replace the main menu of the website but should act like a secondary navigation scheme that helps users to understand where they are on the website.
- A breadcrumb trail should always show the whole path
- The breadcrumb trail should always start with the home page
- The last element of the breadcrumb trail is always the current page
- The elements of the breadcrumb have always a clear separator like a ">" character
- A breadcrumb is positioned on a place where the user would suspect it to be. The most common place is below the main navigation.
- The breadcrumb should be well readable. Use a smaller font-size then the main navigation so that the user see that it's less important then the main menu. Because of the smaller font-size, it's also important that it has contrast so that it's good readable.
- Never link the current page in a breadcrumb. A page that link to itself is bad for SEO.
- The home page doesn't need a breadcrumb.
- Use the breadcrumb consistently throughout your website. Keep it at the same position and place it on every page.
- The breadcrumb should be a mirror of the page URL because they give both a sense of the site structure. Users get easily confused when the page URL is different then the breadcrumb.
- The breadcrumb shouldn't be used as a page heading
Best practices for breadcrumbs on mobile
Of course, on mobile, the breadcrumb can be overwhelming, especially when it's a large website.
So for mobile it's best that we take following best practices in consideration for usability:
- Don't let the breadcrumb wrap to multiple lines. You all ready have less space, so don't let it eat up this valuable space.
- Don't make the breadcrumb font-size too small
- Don't putt the breadcrumb element too close to each other
- Consider shortening the breadcrumb trail visually to only the last 2 levelsx
Best practices for breadcrumbs on mobile
If we take all the best practices for usability and seo in consideration, then we don't see any reason for not placing a breadcrumb.
Almost all great content management system have a breadcrumb option that you can easily activate.
Do you want to add a breadcrumb to your website and you don't know how or you want to know if the breadcrumb is correct and good structured?
jCreativeweb can help you.
