Skip to main content
Breadcrumbs Widget for Sites
Mindy Worley avatar
Written by Mindy Worley
Updated over a year ago

The Breadcrumbs widget can be added to a site so the site visitor can easily understand their location and explore the site effectively, and as a result improve the site's SEO. The Breadcrumbs widget displays the site hierarchy on a trail based on the user's current location. Breadcrumbs should not be used on sites with flat hierarchies (only 1 or 2 levels deep). In this case, the navigation bar can clearly indicates what section a page lives within.

The Breadcrumbs widget cannot be used in fixed headers. For other header types, the header must be converted to a row before you can add the Breadcrumbs widget. To learn more about the header types, see Headers.

Breadcrumbs displays the names of the following:

  • Pages and sub-pages

  • Folders

  • Dynamic pages

  • Store pages (for native store)

For the Breadcrumbs widget to display dynamic pages, you need to enable the Show on all setting:

  1. In the side panel, click Pages.

  2. Click the gear icon next to the dynamic page.

  3. Click Hide/Show in navigation, and select Show on all.

To add the Breadcrumbs widget:

  1. In the side panel, click Widgets.

  2. Click and drag the Breadcrumbs widget into your site. If you are working in Flex mode, point to the container, and click + to select the Breadcrumbs widget.

To learn more about adding widgets to your site, see Add Widgets.

Content Editor

To access the content editor:

  1. Right-click the widget, and click Edit Content.

  2. Select the items you want visible on the breadcrumbs. You have the following options:

    • Home Page. Always show the home page in the breadcrumbs.

    • Current Page. Show the current page in the breadcrumbs.

    • Hide the breadcrumbs when there isn't a parent page. Enables breadcrumbs for all pages except the homepage or pages on the first level of navigation.

Design Editor

To access the design editor:

  1. Right-click the widget, and click Edit Design.

  2. In the Links section, select the font and text options.

  3. Select a Divider style for the divider between each page in the breadcrumbs.

  4. In the Current Page, Hover, and Folder sections, select a font color and font format.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

Did this answer your question?