Articles on: Website Builder

Widget Breadcrumbs & Icon

Widget Breadcrumbs & Icon


Widgets: Breadcrumbs


The Breadcrumbs widget can be added to a site so the site visitor can easily understand their location

in a page's hierarchy 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 page the user is currently on.

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. For information on adding widgets, see Add Widgets


  • Pages and sub-pages
  • Folders
  • Store pages (for native store)
  • Dynamic pages


📘
NOTE
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.
The blog tool isn’t currently supported, so the main blog page will not appear as the
parent. Instead, the homepage will be displayed as the parent for blog posts.


Content Editor


To access the content editor, right click the widget and select Edit Content Or, if you are in flex mode

or Editor 2.0, the option to access the content editor is available in the floating menu. Click the element

to open the floating menu, then click the option for the content editor.


  • 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, select Edit Design from the floating menu to open the design panel. Click the element toopen the floating menu, then click the option to edit design.

Use the design editor to change the link style, configure the divider between the listed pages, and

adjust the spacing.


For information about design options that are not specific to this widget (for example, layout, style, or

spacing), see Widget Design


Widgets: Breadcrumbs


The Breadcrumbs widget can be added to a site so the site visitor can easily understand their location

in a page's hierarchy 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 page the user is currently on.

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. For information on adding widgets, see Add Widgets


  • Pages and sub-pages
  • Folders
  • Store pages (for native store)
  • Dynamic pages


📘
NOTE
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.
The blog tool isn’t currently supported, so the main blog page will not appear as the
parent. Instead, the homepage will be displayed as the parent for blog posts.


Content Editor


The option to access the content editor is available in the floating menu. Click the element

to open the floating menu, then click the option for the content editor.


  • 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


Widgets: Icon


Widget Categories: Basic

Select from a library of more than 1000 ready-made icons, or upload your own SVG file. You can

change icon color, hover, background, border and more. Use icons to emphasize your text and balance

the layout of your site. For information on adding widgets, see Add Widgets


📘 NOTE
* SVG files can be resized without losing resolution.
* SVGs are image files that contain HTML code, meaning when you add an SVG
icon to your site you are also adding lines of code. Multiple complex SVGs can add
thousands of lines of code and cause your site to load slowly. If you need to use
multiple SVG icons on the same page, we recommend turning some of them into
regular images (.png, .jpeg, etc) to avoid loading or functionality issues.


Add Icon Widget from Media Panel


The Media Panel allows you to add an icon and an icon widget to the canvas at the same time. Or, you

can replace existing icons. To learn more about the Media Panel, see Media Panel.


To add an icon widget from the Media Panel:


  1. In the side panel, click Add, then click Media.
  2. (Optional) Use the filters to help locate the desired icon. Or, click Upload Media to add a new icon.
  3. Click and drag the desired icon onto the canvas.


Content Editor


The option to access the content editor is available in the floating menu. Click the element

to open the floating menu, then click the option for the content editor.


  1. Click Choose Icon to select a ready-made icon, or click Upload SVG File.
  2. To link the icon, click Link Icon, and select the page you want to link the icon to.
  3. Type Alt text for the icon. Alt text enables search engines to recognize image content. Use text that

clearly describes the image. Or, click the Sparkle icon to use the AI Assistant to generate alt

text.


📘 NOTE
* Alt text generated by the AI Assistant is in the same language as the page's
current language.
* The Sparkle icon for AI will be disabled if an icon is not selected.


  1. Type a Tooltip for the icon. The tooltip text displays when a user hovers over the image.


Design Editor


To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.


In the Design Editor, you can make changes to the layout of your icon, adjust the icon size and color,

and make changes to the spacing of the widget.


To make the icon a floating widget, enable the Floating toggle, and select a position for the widget. To

display the floating button on the current page only, enable the Show on this page only toggle.


📘 NOTE
Floating icons can be set to display on specific pages, but it will appear on all pages by
default (there isn't currently a way to toggle it off only for particular pages).


For information about design options that are not specific to this widget (for example, layout, style, or

spacing), see Widget Design


FAQs and Troubleshooting


Why is the color of the icon not changing when I'm selecting a different

color?


This issue is typically related to the way the file was originally created. The icon's color must be true

black (e.g., hex code #000000). Additionally, the SVG needs to be exported with inline style.


Since SVG files can be made up of intricate code, it’s recommended to consult someone experienced

with SVGs for any adjustments

Updated on: 12/05/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!