Navigation module

Breadcrumbs block

Shows where the visitor is — Home › Category › Post — and builds itself for every page, post, archive and search, with breadcrumb structured data for search engines.

Overview

Breadcrumbs is a small trail of links from your home page to the current page. You don’t enter anything: it works out the trail for whatever is being viewed. Posts show their category (and parent categories), pages show their parent pages, products show the Shop page and product category, and archives, search results and the 404 page get a fitting last step.

Place it once in a template (Appearance → Editor) to show it everywhere, or in a single page.

At a glance

Block name: wpbb/breadcrumbs
Module: Navigation
Find it by searching: Breadcrumbs
Loads JavaScript on the site: No

When and why to use it

Above the title in post, page, product and archive templates.
Deep sites — documentation, shops, nested pages — where visitors need to find their way back.

Example scenarios

Blog template: above the post title — “Home › Guides › Setup › How to install”.
Shop: in the product template — “Home › Shop › Shoes › Trail runner”.

How to add the Breadcrumbs block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Breadcrumbs in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Breadcrumbs in the results. The block appears with the trail of the page you are editing (a sample trail in templates).
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: Breadcrumbs

Separator

What it does: The character between steps.
What to enter or choose: One of: ›, /, →, |, ·.
Default: ›
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: ›.
Result: Hidden from screen readers, which announce the trail as a list.

Show Home

What it does: Starts the trail with a link to your home page.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Almost always.
Example: On.
Result: Home is the first step.

Home labelShown when Show Home is on

What it does: The text of the first step.
What to enter or choose: Text, or empty for “Home”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: Your site’s name.
Result: The first step shows your text.

Home as an iconShown when Show Home is on

What it does: Shows a house icon instead of the label.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On for a compact trail.
Result: Screen readers still hear the label.

Show current page

What it does: Ends the trail with the current page’s name.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Off if the page title sits right below.
Example: On.
Result: The last step is plain text marked as the current page.

Structured data for search engines

What it does: Adds BreadcrumbList data that search engines can show in results.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Turn off if an SEO plugin (Yoast, Rank Math…) already adds breadcrumb data, so it isn’t there twice.
Example: On.
Result: A JSON-LD script after the trail.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Breadcrumbs offers.

Element: Links selected first

Linked steps. Hover and Focus states.

Styles-tab controls for “Links”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Block

The trail (font size, colour).

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Current page

The current page.

Styles-tab controls for “Current page”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Separator

The separators.

Styles-tab controls for “Separator”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

A <nav aria-label="Breadcrumb"> with an ordered list; the current page has aria-current="page". Optional JSON-LD structured data. No JavaScript.

Limitations and notes

Posts show their deepest category; if a post is in several, the one with the most parent categories is used.
Developers can change the trail with the wpbb_breadcrumbs_trail filter.

Troubleshooting

The trail only shows Home.

On the front page that is correct. In the Site Editor the block shows a sample, because a template has no page of its own.

Overview

At a glance

When and why to use it

Example scenarios

How to add the Breadcrumbs block

Content settings

Block toolbar

Align

Settings panel: Breadcrumbs

Separator

Show Home

Home labelShown when Show Home is on

Home as an iconShown when Show Home is on

Show current page

Structured data for search engines

Design & styling

Element: Links selected first

Element: Block

Element: Current page

Element: Separator

Responsive settings

Advanced options

How it works on your site

Limitations and notes

Troubleshooting