Breadcrumbs

Add breadcrumb navigation trails to your posts and pages, helping visitors understand where they are in your site hierarchy while boosting SEO with structured Schema.org markup.

Use Cases#

• Add breadcrumb trails to e-commerce sites with deep category structures so users can navigate back easily
• Implement Schema.org breadcrumb markup for better Google search results and rich snippets
• Help visitors understand their location on complex sites with multiple content types

How It Works#

1. Enable the module and configure your preferred settings
2. Add breadcrumbs using the shortcode or enable auto-display
3. The module builds a trail from your homepage to the current page
4. Schema.org markup is automatically included for SEO benefits
5. Visitors can click any breadcrumb to navigate back up the hierarchy

Where to Find It#

Location: Use the [breadcrumbs] shortcode in your content, or enable auto-display to add breadcrumbs automatically.

Settings#

Separator Options#

Choose from several separator styles:

• › Right Arrow (default)
• / Slash
• > Greater Than
• → Long Right Arrow
• » Double Right Arrow
• | Pipe
• · Dot

Shortcode#

Use [breadcrumbs] to place breadcrumbs anywhere in your content:

[breadcrumbs]

Output example: Home › Blog › Category › Post Title

Shortcode Options#

Override default settings directly in the shortcode:

Using in Theme Templates#

Add breadcrumbs directly to your theme templates:

<?php echo do_shortcode('[breadcrumbs]'); ?>

Styling#

The breadcrumbs are wrapped in a <nav> element with class switchboard-breadcrumbs. Customize with CSS:

.switchboard-breadcrumbs {
    font-size: 14px;
    padding: 10px 0;
    margin-bottom: 20px;
}

.switchboard-breadcrumbs a {
    color: #0073aa;
    text-decoration: none;
}

.switchboard-breadcrumbs a:hover {
    text-decoration: underline;
}

Schema.org Markup#

The breadcrumbs automatically include Schema.org BreadcrumbList markup, which helps search engines understand your site structure. This can result in enhanced search results showing your breadcrumb trail directly in Google.

Example of the structured data generated:

<nav class="switchboard-breadcrumbs" aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <!-- Additional items... -->
  </ol>
</nav>

FAQ#