WordPress Breadcrumbs
Overview
Breadcrumbs give your visitors a navigation path showing where they are on your site (for example, Home > Blog > Post Title). In Flowmo, you set up breadcrumbs by designing the breadcrumb elements on your canvas and then attaching them in the Breadcrumbs tab of the CMS panel. Flowmo handles the WordPress template logic so your breadcrumb trail updates dynamically on every page.
Prerequisites
- A Flowmo project with CMS mode enabled.
- Breadcrumb elements designed on your canvas (text links, separators, and so on).
Step-by-step
1. Open the Breadcrumbs tab
Open the right sidebar, switch to the CMS panel, and select the Breadcrumbs tab. You will see an informational header that reads "Breadcrumbs -- Manage navigation path elements and separators."
2. Open the configuration panel
Click the "Configure Breadcrumbs" button. A settings panel slides open with the heading "Settings" and an option to attach elements. You can close this panel at any time by clicking the X button in the top-right corner.
3. Select elements on the canvas
Switch to the canvas and select the element(s) you want to use as breadcrumb items. These are typically text elements or link elements that represent individual crumbs in the navigation path.
4. Attach elements
Back in the Breadcrumbs tab settings panel, click "Add Selected to Breadcrumbs". Each selected element is added to the Attached Elements list below.
Every attached element appears as a row showing:
- A navigation icon and the element's name.
- A trash icon to remove it.
The connection type for each attached element defaults to auto, which means Flowmo automatically determines how to render the breadcrumb (as a link, as plain text for the current page, and so on).
5. Repeat for additional elements
You can attach as many elements as your breadcrumb design requires. For example, you might attach separate elements for the home link, category link, and current-page title.
6. Remove an element
Click the trash icon next to any attached element to remove it from the breadcrumbs configuration.
Tips
- Design your breadcrumb visually first. Lay out the full breadcrumb trail on the canvas -- including separators -- before attaching elements. This way you can see exactly how the exported breadcrumb will look.
- Use auto connection type. The default
autoconnection type is the right choice for most setups. Flowmo maps each element to the correct WordPress breadcrumb part based on the page hierarchy. - Breadcrumbs work across page types. Once configured, your breadcrumb template applies to standard pages, archive pages, product pages, and other CMS page types.
Common issues
| Problem | Solution |
|---|---|
| No elements appear after clicking "Add Selected to Breadcrumbs" | Make sure you have elements selected on the canvas before clicking the button. The tab checks selectedIds from the engine state and silently skips if the selection is empty. |
| "No elements attached" placeholder shown | You have not attached any elements yet. Select elements on the canvas and use the "Add Selected to Breadcrumbs" button in the settings panel. |
| Element shows its ID instead of a name | The element does not have a name set. Double-click the element on the canvas to rename it, or check the element's properties in the layers panel. |
Related articles
- WordPress Menus & Submenus -- Create dynamic navigation menus for your WordPress theme.
- WooCommerce Pages -- Set up shop, product, cart, and checkout page templates.