help center

Search
Close this search box.
On this page

Breadcrumbs widget

Last Update: March 17, 2024

Add the widget

Breadcrumbs widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Breadcrumbs widget?

Breadcrumbs are navigation or text paths that help users understand their current location within a website’s hierarchy. The Breadcrumbs widget allows you to add breadcrumbs navigation to any page/post of your website. It automatically generates the breadcrumb trail based on the structure of your site’s pages and hierarchical taxonomy, such as categories and tags.

Note
The Breadcrumbs widget works with the popular Yoast SEO plugin. That means, in order to use the Breadcrumbs widget in Elementor to display breadcrumbs on your website, you need to install and activate Yoast SEO.

Common use case

Emily is building an e-commerce website for decorative and ceramics products. They want to optimize the website for both user experience and search engine visibility. To achieve this, Emily decides to display breadcrumbs on every website product page.

After setting up the online store, Emily adds the Breadcrumbs widget to the product single product page template. As a result, when a customer visits a specific product page, they see a breadcrumb trail displayed at the top of the page:

Home >> Products >> Classic Set >> Wide Bottle

This breadcrumb trail helps customers understand their location on Emily’s e-commerce website. If they wish to explore other dinnerware options, they can easily navigate back to the Products category by clicking on the corresponding link in the breadcrumbs.

Breadcrumbs widget 3

Additional use cases

  • Portfolio websites to guide users through different project categories.
  • Service-based websites for navigating through various service offerings.
  • Educational websites for guiding users through different course categories.
  • Real estate websites to help users navigate through property listings and locations.
  • Recipe websites for guiding users through recipe categories and ingredients.

Add a Breadcrumbs widget: Step-by-step

  1. Add the Breadcrumbs widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under the Breadcrumbs section, use the Alignment field to set the breadcrumbs’ alignment. Options available are left, right, or centered.
    Breadcrumbs widget 2
  3. Use the HTML Tag field to define the type of HTML tag for breadcrumbs. Choices include Div, Span, Nav, or Paragraph.
    Breadcrumbs widget 1
    Note
    Yoast SEO Breadcrumbs Panel offers additional settings that allow you to customize the behavior of breadcrumbs according to your preferences and website structure.

Settings for the Breadcrumbs widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Breadcrumbs widget 5 Breadcrumbs widget 5

Set the alignment of the breadcrumbs. Options available are left, right, or centered.

Define the type of HTML tag for breadcrumbs. Choices include Div, Span, Nav, or Paragraph.

Style tab

Breadcrumbs widget 4

Set the typography options for the breadcrumbs. For more details, see Typography.

Choose the color of the breadcrumbs.

Set the breadcrumbs link color for both Normal and Hover state.

Advanced tab

The Advanced tab provides options to control the widget position, adjust the spacing, add custom code, and more.

Breadcrumbs widget 6 Breadcrumbs widget 8

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!