Basic Breadcrumb

Navigation trail showing the user's location in the site hierarchy.

Simple Breadcrumb

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Products</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Category
                </li>
            </ol>
        </nav>

Deep Navigation

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Documentation</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Components</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Navigation</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Breadcrumb
                </li>
            </ol>
        </nav>

Breadcrumb Separators

Different separator styles between breadcrumb items.

Slash Separator (Default)

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb ss-c-breadcrumb--slash">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Section</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Page
                </li>
            </ol>
        </nav>

Arrow Separator

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb ss-c-breadcrumb--arrow">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Section</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Page
                </li>
            </ol>
        </nav>

Chevron Separator

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb ss-c-breadcrumb--chevron">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Section</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Page
                </li>
            </ol>
        </nav>

Dot Separator

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb ss-c-breadcrumb--dot">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li class="ss-c-breadcrumb__item"><a href="#">Section</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Page
                </li>
            </ol>
        </nav>

Breadcrumb with Icons

Enhanced breadcrumbs with icon elements.

Home Icon

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb">
                <li class="ss-c-breadcrumb__item">
                    <a href="#" aria-label="Home">
                        <span class="ss-c-breadcrumb__icon">⌂</span>
                    </a>
                </li>
                <li class="ss-c-breadcrumb__item"><a href="#">Products</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Details
                </li>
            </ol>
        </nav>

Icons on All Items

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb">
                <li class="ss-c-breadcrumb__item">
                    <a href="#">
                        <span class="ss-c-breadcrumb__icon">⌂</span>
                        <span>Home</span>
                    </a>
                </li>
                <li class="ss-c-breadcrumb__item">
                    <a href="#">
                        <span class="ss-c-breadcrumb__icon">▤</span>
                        <span>Folder</span>
                    </a>
                </li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    <span class="ss-c-breadcrumb__icon">▭</span>
                    <span>File</span>
                </li>
            </ol>
        </nav>

Collapsed Breadcrumb

Truncated breadcrumbs for long navigation paths.

Ellipsis Collapse

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li class="ss-c-breadcrumb__item ss-c-breadcrumb__item--collapsed">
                    <button
                        class="ss-c-breadcrumb__expand"
                        aria-label="Show hidden items"
                    >
                        ...
                    </button>
                </li>
                <li class="ss-c-breadcrumb__item"><a href="#">Parent</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Current
                </li>
            </ol>
        </nav>

Breadcrumb Sizes

Different size variations.

Size Variations

HTML 
<nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb ss-c-breadcrumb--sm">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Small
                </li>
            </ol>
        </nav>

        <nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Default
                </li>
            </ol>
        </nav>

        <nav aria-label="Breadcrumb">
            <ol class="ss-c-breadcrumb ss-c-breadcrumb--lg">
                <li class="ss-c-breadcrumb__item"><a href="#">Home</a></li>
                <li
                    class="ss-c-breadcrumb__item ss-c-breadcrumb__item--active"
                    aria-current="page"
                >
                    Large
                </li>
            </ol>
        </nav>