Overview
The Breadcrumbs element displays a navigation trail showing the current page's position within the site hierarchy. It automatically generates the path based on WordPress's page structure, categories, and archives.
Breadcrumbs improve user experience by helping visitors understand where they are in your site and providing quick navigation back to parent pages. They also provide SEO benefits by creating internal links and enabling rich snippet display in search results.
The element renders as a <nav> container with semantic markup. Labels, separators, and styling are fully customizable through the Inspector settings. Default classes include text-sm for appropriate sizing.
Search engines use breadcrumbs to understand site structure. When properly implemented, breadcrumbs can appear in search results as rich snippets, improving click-through rates.
Settings
Configure the Breadcrumbs element using these Inspector options:
Label Settings
| Setting | Description | Default |
|---|---|---|
| Home Label | Text displayed for the home link at the start of the trail. | Home |
| Search Label | Format string for search results pages. Use %s as placeholder for the search query. |
Search Results for "%s" |
| Not Found Label | Text displayed on 404 error pages. | Page Not Found |
| Archive Label | Format string for archive pages. Use %s as placeholder for the archive type/name. |
%s Archives |
Separator Settings
| Setting | Description | Default |
|---|---|---|
| Separator | Character or text displayed between breadcrumb items. Common options: /, >, », |. |
/ |
| Separator Type | Whether the separator is plain text or an icon. Options: text, icon. |
text |
| Separator Icon | Icon class to use when Separator Type is icon (e.g., fas fa-chevron-right). |
(empty) |
| Show Home Icon | Display a home icon before the Home Label text. | true |
Style Settings
| Setting | Description | Default |
|---|---|---|
| Current Class | CSS classes applied to the current page item (last item in the trail). | font-bold text-gray-900 |
| Link Class | CSS classes applied to breadcrumb links (all items except current). | text-gray-600 hover:text-gray-900 |
Examples
Default Breadcrumbs
Basic breadcrumb trail with text separator and default styling.
<nav class="text-sm" aria-label="Breadcrumb">
<ol class="flex items-center gap-2">
<li>
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
</li>
<li class="text-gray-400">/</li>
<li>
<a href="/services" class="text-gray-600 hover:text-gray-900">Services</a>
</li>
<li class="text-gray-400">/</li>
<li>
<span class="font-bold text-gray-900">Web Design</span>
</li>
</ol>
</nav>Breadcrumbs with Icon Separator
Use an icon as the separator for a more visual appearance. Set Separator Type to icon and specify an icon class.
<!-- Settings: -->
<!-- Separator Type: icon -->
<!-- Separator Icon: fas fa-chevron-right -->
<nav class="text-sm" aria-label="Breadcrumb">
<ol class="flex items-center gap-2">
<li>
<a href="/" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-home"></i> Home
</a>
</li>
<li class="text-gray-400">
<i class="fas fa-chevron-right text-xs"></i>
</li>
<li>
<a href="/blog" class="text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li class="text-gray-400">
<i class="fas fa-chevron-right text-xs"></i>
</li>
<li>
<span class="font-bold text-gray-900">My Article Title</span>
</li>
</ol>
</nav>Styled Breadcrumbs
Custom styling with primary color links and a background container.
<!-- Settings: -->
<!-- Link Class: text-primary hover:text-primary/80 transition-colors -->
<!-- Current Class: font-semibold text-gray-900 -->
<!-- Separator: » -->
<nav class="text-sm bg-gray-100 px-4 py-2 rounded-lg" aria-label="Breadcrumb">
<ol class="flex items-center gap-3">
<li>
<a href="/" class="text-primary hover:text-primary/80 transition-colors">
<i class="fas fa-home mr-1"></i>Home
</a>
</li>
<li class="text-gray-400">»</li>
<li>
<a href="/products" class="text-primary hover:text-primary/80 transition-colors">Products</a>
</li>
<li class="text-gray-400">»</li>
<li>
<span class="font-semibold text-gray-900">Widget Pro</span>
</li>
</ol>
</nav>