# Breadcrumb Trail Styling (SCSS)

> Styles breadcrumb trails from the Breadcrumbs shortcode and popular SEO plugins with smaller muted text, chevron separators and a clear current page.

- Type: SCSS
- Runs: Site-wide header
- Category: [SEO](https://wpide.com/library/category/seo/)
- Tags: scss, breadcrumbs, navigation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/breadcrumbs-style-scss/

## Code

```scss
$muted: #646970;
$separator: "\203A";

.wpide-breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumbs {
    margin-bottom: 1.25em;
    color: $muted;
    font-size: 0.85em;

    ol {
        gap: 0.35em !important;
    }

    a {
        color: inherit;
        text-decoration: none;

        &:hover,
        &:focus {
            text-decoration: underline;
        }
    }

    [aria-current="page"] {
        color: currentColor;
        font-weight: 600;
    }
}

.wpide-breadcrumbs li > span[aria-hidden="true"] {
    font-size: 0;

    &::before {
        content: $separator;
        font-size: 0.85rem;
        opacity: 0.6;
    }
}
```

## Notes

Adjust $muted and the separator character to taste.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Breadcrumb Trail Styling (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/