stand for ukrainian independence image
Stand for Ukrainian Independence. Contribute.
stand for ukrainian independence image

Help Center

WordPress Breadcrumbs: Website Navigation and Trail
desertrose
Tetiana Pryhorovska
Content writer
Updated on
Useful Resources

WordPress Breadcrumbs: Website Navigation and Trail

Every breadcrumbs’ meaning you’ll find on the web throws back to the fairy tale about Hansel and Gretel. Perhaps, it was relevant at the dawn of web design, but now this comparison bores to death. Big sites (especially e-shops) look like labyrinths, so I think the connotation of Ariadne’s thread is more appropriate. 

Designers place breadcrumb trails on every page except landing and main pages to kill three birds with one stone and:

  • provide more usability by correct navigation;
  • design the site more impressively;
  • make the site more SEO-friendly.

Here, I propose you pull the thread and reach the ball, i.e., delve into the concept of breadcrumbs on the website, the main trends in this field, and the best practices. However, describing the best and most commonly used practices can sometimes narrow your imagination. Therefore, I’d like to tell you about go-to ways in website breadcrumbs design and breadcrumbing examples – both good and not so good. 🙂 

What Are Website Breadcrumbs?

According to usability principles, visitors should not be disoriented on the website. Therefore, answering the questions “What are breadcrumbs? and What are breadcrumbs on a website?”, I’d like to say that breadcrumb navigation implements this principle as a secondary navigation system. It means breadcrumbs depict site structure, make website hierarchy more understandable, and provide easy access to other site sections. The breadcrumbs look like a horizontal text line with separators and present visitors’ position on the website. 

swell breadcrumbs example
Source: S’well

Despite being the secondary navigation system and providing site hierarchy, breadcrumbs on a website contribute to the site’s usability and SEO; they:

  • increase the accessibility of categorized products and decrease the number of clicks to conversion;
  • often contain keywords (i.e., not Main page > Products, but Flowers > Roses);
  • provide better interlinking between website pages for better indexing;
  • make it possible to obtain snippets with navigation trails;
  • make the site clear, picturesque, and thus, more memorable.

You see, how much the trail of breadcrumbs matters. 

Discovering Breadcrumbs Types

Typically, the breadcrumb refers to its location, attribute, and path. I’d like to present types of breadcrumbs for better understanding:

  • location-based breadcrumbs reflect the website hierarchy and show visitor’s current position;
location-based breadcrumbs example
Source: PAPAZIAN
  • attribute-based breadcrumbs reflect all attributes chosen by visitors and, therefore, are widely used by e-shops;
  • path-based breadcrumbs show an individual visitor’s way and reproduce their trails, even very intricate.
path-based breadcrumbs
Source: Nixon

Why Use Website Breadcrumbs?

Let’s look into the matter from the pros and cons perspective.

No wonder that pros prevail, especially when taking into account the best breadcrumbs features:

  • they do not take much space on the site;
  • breadcrumbs are easy to build;
  • users understand them intuitively;
  • they contribute to the Page Rank index.

Cons are associated with incorrect building and implementation of the website breadcrumbs:

  • They should be visible to users. Web designers traditionally place breadcrumbs on the upper side of the web page, but it is possible to put them in the header. Positioning at any other site point makes the site breadcrumbs invisible and unused.
  • The main page, aka the homepage, should not contain breadcrumbs.
  • The current page should not be clickable to avoid looping.
  • To make better indexing, do not forget about microdata markup. 

Breadcrumbs Website Examples

WordPress is used by 43.25% of websites worldwide, while Elementor usage amounts to 7.1%. The issue of how to use breadcrumbs is relevant, especially for Elementor breadcrumbs.

Website breadcrumbs should be attractive, visible, and not contradict the website design. I’d like to present some breadcrumbs examples built with WordPress and Elementor plugins. 

As mentioned above, the breadcrumbs look like a horizontal text line with symbols (>, 一, ➡, etc.) that separate higher and lower-level pages.

Source: Narrowem

One can customize Elementor breadcrumbs by applying colors to fonts and icons, gaps, backgrounds, borders, spacings, etc.

wplift breadcrumbs
Source: WPLift

I will even say more 一 breadcrumbs can contain images. It is not traditional for web design, but who knows, maybe it would be a new trend. Maybe there will be many different breadcrumb styles. And breadcrumbs will become a decent design element, just like the following WordPress sites show.

florarie iasi wordpress breadcrumbs example
Source: FLORARIE IASI

What to Avoid When Developing Breadcrumbs? 

Yes, failure happens sometimes. I think that the term “worst practices” should not be applied to web design because best practice often means a standard/common practice. The so-called worst practices generally employ unusual sizes, fonts, and icons inside breadcrumbs. Undoubtedly, website breadcrumbs will sometime take their rightful place as decorative elements.

So, the worst breadcrumbs website examples and practices are as follows:

  • Minimalism trends envisage minimal space for website breadcrumbs, so too big font sizes, icons, separators, etc., in designing breadcrumb navigation is a bad practice.
  • One neglects breadcrumbs for the mobile version.
  • One uses breadcrumbs for some pages of the same site and neglects other pages.
  • Primary navigation is sacrificed in favor of breadcrumb navigation.
  • One uses slashes and left-pointing arrows or symbols in UX breadcrumbs.
  • Multi-level sites do not contain breadcrumbs at all. 
  • The website breadcrumbs string includes the current page.
  • There are no intermediate pages in the website breadcrumbs string.
  • One ignores website breadcrumbs at all.

How to Add Breadcrumbs to the Website? 

You can use two different ways to add website breadcrumbs: plugins or manual creation. I’d like to focus on the easiest way – plugins. Here is my list of the most popular plugins for website breadcrumbs:

  • All-in-One SEO and Yoast SEO include SEO options and allow positioning breadcrumbs on the page.
  • Breadcrumb NavXT is easy to install and aims to customize breadcrumbs (including templates) that will be displayed on different page types.
  • Flexy Breadcrumb is one the accessible plugins in this field;
  • Breadcrumbs widget from Crocoblock allows website developers to build custom breadcrumb trails.

WordPress plugins propose possibilities for all tastes. One can try each of them and take the best one.

Sum Up

The benefits of breadcrumbs are obviously SEO-friendliness and usability. No doubt, they should harmoniously fit the overall design and be noticeable to users to provide appropriative navigation. The breadcrumbs vary in type (location-based, attribute-based, and path-based breadcrumbs), style, etc. In general, there is no best breadcrumbs or breadcrumbs design.

I think that breadcrumbs are underestimated as design elements. Therefore, I call you to use plugins to turn these boring strings into the real Ariadne’s thread. As you know, this thread was bright and colorful. 😉