Breadcrumbs Widgets

SEO-Friendly Breadcrumbs for Better Navigation

The Breadcrumbs widget in Ultimate Addons for Elementor (UAE) Lite helps improve your website’s navigation and user experience. It also plays an important role in SEO by helping search engines understand the structure of your site. With this widget, you can easily display a breadcrumb trail anywhere on your page and fully customize it to match your site’s design.

Let’s explore how to use and customize the Breadcrumbs widget in just a few clicks.

How to Use the Breadcrumbs Widget

Follow these steps to add and set up the Breadcrumbs widget in Elementor:

1. Edit the page with Elementor where you want to display breadcrumbs.
2. Search for the Breadcrumbs widget in the Elementor widget panel or find it under the “Ultimate Addons” section.
3. Drag and drop the widget onto your page.
4. The breadcrumbs trail will automatically appear based on your current page or post hierarchy.

Note: Breadcrumbs will only appear correctly if your website has a clear page/post structure. Ensure your content uses parent-child relationships or categories.

Key Features of the Breadcrumbs Widget

• SEO-Friendly: Helps search engines like Google understand your website hierarchy.
• Auto-Detection: Automatically shows the correct breadcrumb path based on the current page/post.
• Design Flexibility: Fully customizable styles to match your website’s branding.
• Responsive: Looks great on all screen sizes and devices.
• Schema Markup Support: Improves search engine visibility with structured data (if SEO plugin is active).

Customization Options

You can easily personalize the appearance and layout of breadcrumbs through the widget settings in the Elementor editor.

Content Settings

General

Under General section you will see the following important options –

1. Show Home: Toggle this option to display the Home item in the breadcrumb trail. Example: Home > Blog > Post Title
2. Home Icon: Select the icon or SVG you want to display for the Home link. Example: By default, we are providing a house icon (🏠) to visually represent the Home page.
3. Alignment: Set the position of the breadcrumbs on your page. Options: Left, Center, or Right alignment.

Separator Type

Under Separator section you will get options to add Types of Separator –

1. Text: Enter any custom text or symbol to display between breadcrumb items. Example: Home / Blog / Post Title
2. Icon: Choose an icon to use as a separator between breadcrumb items. Example: Home > Blog > Post Title

Display Text

Under Display section you will get options to add Custom Text for Breadcrumbs –

1. Home Page: Customize the label for the Home page in the breadcrumb. Example: Change “Home” to “Homepage” or “Start”.
2. Search Page: Customize the label shown when a user views search results. Example: Set label as “Search Results” or simply “Search“.
3. 404 Page: Customize the label displayed when a 404 (page not found) error occurs. Example: Use “Page Not Found” or “Oops! 404”.

Style Settings

• Typography – Change font family, size, and weight.
• Color – Set colors for active and inactive breadcrumb links.
• Spacing – Adjust the spacing between breadcrumb items.

Best Practices for Using Breadcrumbs

• Always display breadcrumbs on long or deeply nested websites.
• Keep breadcrumb trails short and relevant.
• Use breadcrumbs alongside a well-structured navigation menu.

Need Help?

If you have any questions or face issues while using the widget, feel free to reach out to our support team or check out more UAE Documentation.