Breadcrumb — wd-breadcrumb

Category: Navigation · Tag: wd-breadcrumbBack to: Components overview

---

What it does

A breadcrumb trail: Stores › Samsung › Smart phones — showing visitors where they are and how the site is structured, with every step before the current page clickable. It takes no slotted content: the trail is derived automatically from a menu you select, and resolved fresh on every page view — nothing to fill in by hand, nothing to keep in sync.

---

How it works — a menu is the site's map

Menus already describe your site's structure, so the breadcrumb reuses them:

1. You pick a menu in the component's settings.
2. On each page view, the platform finds the menu item that links to the current page and walks up its parents — that chain is the trail. Titles and localized URLs come from the menu itself.
3. If the current page isn't in the menu, the breadcrumb renders nothing (no broken trail on a live site).

The "site structure" menu pattern (recommended)

A selected menu doesn't have to be displayed anywhere. The cleanest setup is a dedicated menu — e.g. "Site structure" — that you never place on a page: it exists purely as the site's canonical map for breadcrumbs. That gives you full editorial control when a page is reachable through more than one path (Stores › Samsung › … › S25 Ultra vs Electronics › Smart phones › S25 Ultra): whatever the structure menu says is the canonical path.

If the page appears in two branches of the same menu, the first one in menu order (top-to-bottom, depth-first) wins — deterministic, and reorderable from the menu editor.

---

Adding it & its settings

Add Component → Navigation → Breadcrumb. Available in pages and layouts — a layout placement is the classic pattern: one breadcrumb under the header covers every page. (It's greyed out for shared elements — there is no "current page" there.)

Basic Settings (all components): #id, Classes, Inline Style.

Component Settings:

Setting	What it does
Breadcrumb menu (required)	The menu whose structure defines the trail — pick your dedicated structure menu, or any nav menu that links to your pages.
Show a Home crumb	Prepends a crumb linking to the site root (/). Useful when the menu doesn't include Home as an item.
Home label	The text for that crumb (default Home). Localized sites can instead include Home as a menu item and leave this off — menu items localize through keywords.
Append dynamic field	On a dynamic page, $$field appends the current item's field as the final crumb — e.g. $$product_name turns … › Smart phones into … › Smart phones › S25 Ultra.

In the builder preview

A page preview shows the real trail. A layout preview shows a placeholder (Home › … › Current page) — there's no current page while editing a layout; the real trail appears wherever the layout is used.

---

Styling

CSS variables

Variable	Default
--wd-breadcrumb-separator	'›' (any character: '/', '»', '→')
--wd-breadcrumb-separator-color	#94a3b8
--wd-breadcrumb-gap	0.5rem
--wd-breadcrumb-wrap	wrap
--wd-breadcrumb-font-family	inherit
--wd-breadcrumb-font-size	0.875rem
--wd-breadcrumb-font-weight	normal
--wd-breadcrumb-color	#64748b
--wd-breadcrumb-link-color	#0f766e
--wd-breadcrumb-link-decoration	none
--wd-breadcrumb-link-hover-color	#115e59
--wd-breadcrumb-link-hover-decoration	underline
--wd-breadcrumb-current-color	#1e293b
--wd-breadcrumb-current-font-weight	600

/* example: slash separators, brand colors */
wd-breadcrumb {
  --wd-breadcrumb-separator: '/';
  --wd-breadcrumb-link-color: var(--brand-color, #0e7490);
}

::part()

Part	Element
breadcrumb-<id>	The <nav> wrapper.

---

Notes

• The trail is semantic and accessible: nav[aria-label="Breadcrumb"] › ol › li, with the current crumb marked aria-current="page" and never rendered as a link.
• Unpublished menu items neither match nor appear — hiding a branch in the menu hides it from trails too.
• Non-page menu items in the chain keep their nature: external-URL items stay links, plain text items render unlinked.
• If the breadcrumb doesn't appear on a page, the page isn't in the selected menu — add it to your structure menu.