Breadcrumbs

Show the path from home to the current page and speed up jumps to parent sections.

What they are

Secondary navigation: an ordered list of links separated by glyphs (e.g. >, arrows).

Why use them

• Orientation: see hierarchy at a glance
• Assistive tech: semantic nav + structured list + optional schema
• SEO: BreadcrumbList structured data when enabled
• WCAG: supports 2.4.5 (multiple ways), 2.4.8 (location), 3.2.3 (consistent navigation—when placement is stable)
• Fewer clicks: jump up without using the main menu repeatedly

WCAG notes

• 2.4.5 Multiple ways: extra wayfinding beyond primary nav
• 2.4.8 Location: shows where you are in the site
• 3.2.3 Consistent navigation: keep breadcrumb placement predictable

Integration

Option 1 — PHP (theme)

<?php
if ( function_exists( 'wcag_breadcrumbs' ) ) {
wcag_breadcrumbs();
}
?>

Option 2 — Shortcode (builders)

[wcag_breadcrumbs]

Settings

• Enable: global toggle
• ARIA label: e.g. “Navigation path”
• CSS class on <nav>: default wcag-breadcrumbs
• Intro text: optional prefix (e.g. “You are here:”)
• Intro layout: block above vs inline
• Homepage entry: text only, one of four included Lucide icons only (house, house with heart, office building, or open door), or an icon followed by visible text
• Homepage label: visible link text or the accessible name of the selected icon; default “Home”. In the combined display, the decorative icon sits before the text inside the same homepage link and uses the corresponding desktop or mobile separator margin.
• Current page display: show the last Breadcrumb as unlinked or linked text
• Mobile breakpoint: e.g. 500px for compact styles

Separators: choose a character or one of seven Lucide icons independently for desktop and mobile. Available icons are Chevron, Double chevron, Arrow, Slash, Horizontal line, Circle, and Diamond. Desktop and mobile icon sizes can be configured independently from 8 to 48 pixels. Mobile icons can be rotated by 0°, 90°, 180°, or 270°; the default is 0°. Directional icons mirror for right-to-left desktop content. Existing margins and the separator-and-icon color apply to both modes.

Typography & links: independently configurable desktop and mobile Breadcrumb font sizes with rem, em, px, or % units (default: 1rem), line-height, shared desktop-and-mobile inner spacing of list items, shared link inner spacing in pixels (hit area), default/hover/current colors, text-decoration + hover. The first mobile entry does not receive additional left link spacing. Unit changes use a transparent 16px reference conversion; em and % can render differently depending on the theme context. rem is recommended because it follows the website root font size; advanced CSS values such as clamp() remain available. Long labels wrap instead of being clipped with an ellipsis.

Alignment: left / center / right per desktop and mobile. In the stacked mobile layout, separators stay directly attached to their label when centered or right-aligned, and icons remain vertically centered on the text line. Centered mobile labels share the homepage entry’s center axis regardless of separator size and spacing.

Live preview

The settings separate content and behavior, live preview, appearance, responsive layout, and technical options into clear, unnumbered cards. Mobile and advanced layout controls are directly available without another disclosure level inside the Responsive layout card.

The always-visible live preview updates as you change options, switches between desktop and mobile widths, simulates standard/hover/keyboard-focus states, and exposes the generated HTML on demand. It uses the full width of its own preview card on desktop and mobile.

Examples

Example 1: Default

Enable with ⤏ separator, left alignment, place under the site header via PHP.

Example 2: Minimal

Simple >, smaller type, muted colors, intro inline.

Example 3: High emphasis

Arrow separator, larger type, high contrast, intro on its own line.

Example 4: Mobile-first

Compact mobile glyph (⋮), tighter spacing, centered on small screens.

Tips

• Keep placement consistent site-wide
• Use preview to tune spacing
• Test breakpoints
• Meet link contrast (1.4.3)
• Pick separators that read as separators, not content
• Override via theme CSS on the wrapper class
• Current page usually non-link + aria-current=”page”
• Verify with a screen reader

Technical notes

• <nav> + <ol>
• Schema.org BreadcrumbList when output includes JSON-LD (per plugin settings)
• Current item marked with aria-current=”page”
• Inline styles generated; theme can override
• No JavaScript required for rendering

Available for: All plans Free