How to Add Breadcrumbs in Elementor [Beginners Guide]

Updated on February 19, 2025 by Editorial Team

Want to improve your website’s navigation and SEO? Learning how to add breadcrumbs in Elementor can make a big difference.

Breadcrumbs are a useful navigation element, showing users exactly where they are on your site while helping search engines understand your site structure.

They typically appear as horizontal navigation trails that help users backtrack their steps. For any website with a large number of pages, it enhances its usability and functionality, leading to a stellar user experience.

If you’re wondering how to add breadcrumbs in WordPress Elementor, this guide will explore easy ways to do so without any coding.

Let’s get started!

Table Of Content

What are Breadcrumbs?

Breadcrumbs are a navigation tool on websites that shows users where they are within your site’s hierarchy. It is usually located at the top of the page, consisting of a series of links to indicate the current location of the user.

It’s a simple yet highly effective feature, especially on websites with many pages or a complex structure.  

Breadcrumbs how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor

Think of it as a trail of breadcrumbs that leads visitors back to the homepage or previous sections without having to use the back button on their browser.

What are the Different Types of Breadcrumbs?

Breadcrumbs navigation can take different forms depending on the content and structure of your website.

Here are the main types:

  • Hierarchy-based breadcrumbs: These breadcrumbs display the path from the homepage to the current page and represent the structure of your website. For instance, Home > Blog > How to Add Breadcrumbs in Elementor.
  • Attribute-based breadcrumbs: Common on e-commerce websites, these breadcrumbs reflect a user’s filtering choices, like product categories, colors, sizes, or brands. For instance, Home > Woman’s clothing > Dresses.
  • History-based breadcrumbs: These breadcrumbs show the other pages a user has visited on the site. For example, they could represent recent actions or searches on the site, giving users the ability to navigate back to previous pages they visited.

Simplify your website navigation with a customized header across the site. Learn How to Use Elementor Header Template to create a professional header.

Why Should You Consider Adding Breadcrumbs to Your Elementor Website?

Adding breadcrumbs to your Elementor site can significantly improve both user engagement and your site’s SEO performance.

Here’s how:

  • Improved navigation: Breadcrumbs help visitors easily backtrack and move between sections of your website, making it more user-friendly.
  • SEO boost: Search engines, like Google, value clear site structure. Breadcrumbs contribute to better indexing and can improve your rankings.
  • Cleaner design: Breadcrumbs are a small design element that can make a big difference. They take up minimal space but add clear value to your website layout, enhancing user experience and reducing bounce rate.

Present your website information in an organized and structured manner with interactive WordPress tabs. Check out the Best WordPress Tab Plugins that require no coding skills to use.

What is the Elementor Breadcrumbs Widget?

An Elementor breadcrumbs widget is a useful WordPress tool that allows you to add the breadcrumbs functionality to your website.

Breadcrumbs Bar Widget is one such widget from The Plus Addons for Elementor to easily add a dynamic breadcrumb navigation bar to your site with zero coding required.

Add breadcrumbs in elementor how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor

It’s a simple, ready-to-use solution that can be customized to suit your site’s design.

With this Elementor breadcrumbs plugin, you can add beautiful and professional Elementor page breadcrumbs to your blog post pages, custom post types, Elementor category page, WooCommerce product page, and more.

Here are the key features of the Breadcrumbs Bar Widget for Elementor-

  • Multiple styles: Experiment with multiple breadcrumb style options that align with the design and aesthetic of your website.
  • Customized icons: Add customized icons and text to your home title.
  • SEO optimized: The widget lets you add SEO-optimized breadcrumb bars to boost visibility and traceability for search engines.
  • Enable/Disable breadcrumbs: You can easily choose to show or hide the home page, current page, or parent page from the breadcrumb trail.
  • Flexible: Add a customized Elementor post breadcrumb bar to any type of page or website, from blog pages to e-commerce product pages or custom post types single pages.

How to Add Breadcrumbs in Elementor Site [Step-by-Step]

Now let’s get down to business and dive into the step-by-step process of adding breadcrumbs to your Elementor site using the Breadcrumbs Bar Widget by The Plus Addons-

Step 1: Install The Plus Addons for Elementor

Before we can start adding breadcrumbs to Elementor, you need to install The Plus Addons for Elementor plugin.

This plugin offers the breadcrumbs widget along with 120+ other powerful widgets to enhance your Elementor website.

Go to your WordPress dashboard > Plugins > Add New. Search for The Plus Addons for Elementor, click Install Now, and then Activate.

Wordpress dashboard how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor

Step 2: Add the Breadcrumbs Bar Widget for Elementor

Once the plugin is activated, go to the WordPress dashboard and navigate to The Plus Addons > Widgets.

Search for the widget name and turn on the toggle to enable the widget.

Bar widget for elementor how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor

After adding the breadcrumbs plugin in Elementor, it’s time to edit the page where you want to add breadcrumbs.

Go to Pages in your WordPress dashboard and open the page you wish to edit with Elementor. Click on Edit with Elementor.

Next, drag and drop the breadcrumbs bar widget to the header template on the page to make it accessible on the website.

Accessible on the website how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor

Step 3: Customize Your Breadcrumbs

You can now start customizing the Elementor breadcrumbs bar to suit your needs.

The Plus Addons for Elementor gives you plenty of design flexibility, such as:

  • Multiple styles: In the Breadcrumb Style dropdown in the left bar, you can choose from two unique styles for your breadcrumbs bar for a professional-looking website.
Image 47 how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor
  • Breadcrumbs full width: If you choose Style 1, you can turn on the breadcrumbs full-width toggle to make a full-width breadcrumb bar in the header.
Breadcrumbs full width how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor
  • Home icon: From the Home Title/Icon field, you can change the text for the home page and select a custom font.
Home page how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor
  • Separator icon: Under the Separator icon field, you can add a custom separator icon or image to appear in the breadcrumbs bar.
Separator icon how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor
  • Breadcrumbs on/off: From the Breadcrumbs on/off field, you can choose to show or hide the current page, parent page, or the home page link from the breadcrumb.
Breadcrumbs on off how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor
  • Style: Under the Style tab, you can adjust the text, typography, sizing, alignment, background colors, and more for your breadcrumbs text, home icon, content, separator, and so on.
Breadcrumbs text home icon content how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor
  • On scroll view animation: This is a global extension by The Plus Addons for Elementor, applicable to all the widgets, which lets you add fun scrolling animations to the widget.

Step 4: Save and Preview

After customizing your breadcrumbs widget, click Update to save the changes.

You can preview your site to ensure that everything looks great and works as expected.

Give your website a unique identity with customized icons. Know How to Add Custom Icons to Elementor for a professional website.

20 checklist for wordpress site maintenance how to add breadcrumbs in elementor [beginners guide] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​



    Wrapping Up

    A custom breadcrumb function is an impactful design addition to your website to enhance the user experience and SEO.

    By using a breadcrumb plugin for Elementor, you can quickly add a fully customized breadcrumb bar and display it anywhere on your website.

    Now that you know how to add breadcrumbs in WordPress, you’re all set to create a more structured and navigable website.

    The Plus Addons for Elementor make it easy with its Breadcrumbs Bar widget, giving you full control over styling, placement, and functionality.

    And that’s not it. With over 120+ Elementor widgets, the plugin helps you enhance your website’s design and functionality like a pro.

    Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

    Try it out and take your Elementor site to the next level!

    FAQs on Adding Breadcrumbs in Elementor

    Are Breadcrumbs Clickable?

    Yes! Breadcrumbs are clickable, allowing users to navigate back to previous pages or sections within your site.

    Can I create custom breadcrumbs in Elementor without plugins?

    Yes, but it can get technical and might break your site. So, it is best to create breadcrumbs in Elementor using a plugin like The Plus Addons that has a Breadcrumbs Bar Widget as it offers unmatched customization options and design possibilities.

    Is there a way to style breadcrumbs in Elementor?

    Yes, you can style breadcrumbs in Elementor using the Breadcrumbs widget from The Plus Addons, adjusting settings like typography, spacing, icons, background colors, and separators.

    How do I display breadcrumbs on specific pages in Elementor?

    You can control where breadcrumbs appear using the widget’s visibility options, which allow you to show or hide them for the parent page, home page, and current page.

    How to remove breadcrumbs in WordPress Elementor?

    To remove breadcrumbs, simply delete the Breadcrumbs widget from the Elementor editor or disable the widget via the plugin settings.

    Why are my breadcrumbs not showing in WordPress?

    If your breadcrumbs aren’t displaying, ensure that the Breadcrumbs widget is enabled and placed correctly. Additionally, check your theme’s settings to make sure they don’t conflict with the breadcrumbs feature.

    Related Blogs