# Breadcrumbs

SmartCrawl provides breadcrumb navigation with built-in Schema.org `BreadcrumbList` markup. Breadcrumbs improve both UX (users can navigate up the site hierarchy) and SEO (Google displays breadcrumb trails in search results).

## Enabling Breadcrumbs

1. Go to **SmartCrawl > Advanced Tools > Breadcrumbs**
2. Toggle the module ON
3. Configure separator and display options
4. Add the breadcrumb output to your theme

## Adding Breadcrumbs to Your Theme

### Method 1: Shortcode

```
[smartcrawl_breadcrumbs]
```

Place this in any post, page, widget, or theme template.

### Method 2: Shortcode with Custom Wrapper

```
[smartcrawl_breadcrumbs before="<nav aria-label='Breadcrumb'>" after="</nav>"]
```

The `before` and `after` parameters wrap the breadcrumb trail with custom HTML.

### Method 3: PHP (Theme Template)

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

Place this in your theme's `header.php`, `single.php`, `page.php`, or a custom template part.

## Configuration

### Separator

Choose from presets or enter custom HTML:

| Preset | Output |
|--------|--------|
| `>` | Home > Category > Page |
| `/` | Home / Category / Page |
| `»` | Home » Category » Page |
| Custom | Any HTML character or element |

**Recommendation:** Use `>` or `»` — they visually indicate hierarchy.

### Display Options

| Option | Description |
|--------|-------------|
| Show on homepage | Whether breadcrumbs appear on the homepage (usually no — it would just show "Home") |
| Home link text | Default "Home" — can be customized (e.g., site name) |
| Post breadcrumb type | Show category hierarchy or just parent page |

## Schema Output

SmartCrawl automatically outputs `BreadcrumbList` schema markup alongside the visible breadcrumbs:

```json
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Services",
      "item": "https://example.com/services/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Basic Rider Course"
    }
  ]
}
```

This produces breadcrumb navigation in Google search results:

```
example.com > Services > Basic Rider Course
```

## Styling

SmartCrawl outputs breadcrumbs with CSS classes you can target:

```css
/* Breadcrumb container */
.smartcrawl-breadcrumbs {
    font-size: 14px;
    padding: 10px 0;
    color: #666;
}

/* Individual breadcrumb links */
.smartcrawl-breadcrumbs a {
    color: #0066cc;
    text-decoration: none;
}

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

/* Separator */
.smartcrawl-breadcrumbs .separator {
    margin: 0 8px;
    color: #999;
}

/* Current page (last item, no link) */
.smartcrawl-breadcrumbs .current {
    color: #333;
    font-weight: 500;
}
```

## White Label Support

SmartCrawl Pro supports white labeling the breadcrumb module — you can remove WPMU DEV branding from the output.

## Best Practices

1. **Place breadcrumbs near the top of the page** — above the main content, below the header
2. **Don't show on homepage** — it adds no value (just "Home")
3. **Keep the trail short** — Home > Category > Page is ideal. Avoid deep nesting.
4. **Validate the schema** at [Google Rich Results Test](https://search.google.com/test/rich-results)
5. **Ensure the hierarchy makes sense** — breadcrumbs should reflect the actual site structure