Breadcrumb Widget

The Breadcrumb widget provides your customers with a trail of links displayed near the top of a webpage. This trail reflects the hierarchical structure of your website and indicates the customers' path from the homepage to their current location. The breadcrumb navigation enables your customers to quickly navigate back to previous pages by clicking on any part of the breadcrumb trail. 

Adding a Breadcrumb Widget

To add a Breadcrumb widget:

1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
2. Navigate to the Widgets list on the Visual Editor Left Panel.
3. Type the widget name in the search bar, or expand the Navigation grouping and select the Breadcrumb widget.
4. Drag and drop the Breadcrumb widget from the list onto the desired crafting area of the Layout Canvas.

Configuring the Breadcrumb Widget

Once you have added the Breadcrumb widget, click it to activate the Property Panel where you can customize its Styles and Settings according to your preferences.

To configure the Breadcrumb widget:

1. Go to Styles to modify the widget styling features:

• Expand General and select how the breadcrumb trails are separated from each other from the Separator drop-down list.
• Turn on/off the Show Home Page toggle to display or hide the home page in the breadcrumb trail.
• Indicate the gap between breadcrumb trails.
• Configure the styling features (see Global Styles).

2. Go to Settings and expand Visibility to modify the visibility of the widget on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

Modifying the Breadcrumb Widget Properties

Once you have configured the Breadcrumb widget, you can modify the corresponding properties inside the widget according to your preference. This allows you to define the appearance and functionality of the widget on your website.

The following properties are available:

• Breadcrumb Item allows you to modify the individual entities displayed within a Breadcrumb widget.
  • Select the item mode from the Mode drop-down list. The following options are available:
    • Normal - refers to the static state of the item, when it is not affected by any interaction.
    • Active - refers to the condition of the item when the user performs an action like clicking, tapping, or pressing on the widget.
  • Expand General and choose how the item is displayed on your website (only the label, only the icon, label with left or right icon, etc.).
  • Configure the styling features (see Global Styles).
• Label allows you to modify the styling features of the text inside the breadcrumb item (see Global Styles).
• Icon allows you to add or change the icon that best suits your website design. To do so:
  • Go to Styles to configure the styling features (see Global Styles).
  • Go to Content and click Change Icon.
  • Navigate to General Icons and select the corresponding icon from the list.
  • Navigate to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.