Breadcrumb Element

Using the Breadcrumb Element

 

Breadcrumbs help visitors understand where they are on your site and quickly move back to previous pages. They create a simple path of links, for example, Home > Services > Pricing, so navigation feels natural and organized. They are especially useful on sites with multiple levels or dropdown menus.


 

Add the Breadcrumb Element 

1. Open your site in the builder.
2. In the ELEMENTS menu, find the Breadcrumb element.
3. Drag and drop it onto your page.

Create a Breadcrumb Path 

 

Breadcrumbs follow the page hierarchy set in your primary navigation. If a page sits under another page in the menu, that relationship becomes part of the breadcrumb path.

To set this up:

1. Open your site’s primary navigation for editing.
2. Create or move a page so it becomes a descendant of another page.
3. Save your changes. The breadcrumb element will automatically reflect this path.

For example, dragging “Pricing” under “Services” creates a dropdown and tells the breadcrumb that Pricing is a child of Services.

Customize the Breadcrumb (Breadcrumb Editor Options)

 

After placing the element, click it to open the toolbar. Then select Breadcrumb Editor to adjust the settings.

  Preview of a breadcrumb with a custom "~" separator and custom link colours:



The home icon toggle creates a clickable home icon in the same color as your breadcrumb links:

List Customization

Home Icon: Toggle ON or OFF to show or hide the home icon.
Alignment: Position the breadcrumb (left, center, or right).
Separator: Choose the symbol or character between each link.
Separator Spacing: Adjust the space around the separator.
 

Color Customization

Current Page Color: Color for the active page.
Link Color: Color for the breadcrumb links.
Link Hover Color: Color shown when hovering over a link.
Separator Color: Color of the separator symbol.

Style Customization

Customize the fonts, spacing, and border from this tab.