### Basic Breadcrumb

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

#### Simple Breadcrumb

HTML

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

#### Deep Navigation

HTML

    <nav aria-label="Breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb__item"><a href="#">Home</a></li>
                    <li class="breadcrumb__item"><a href="#">Documentation</a></li>
                    <li class="breadcrumb__item"><a href="#">Components</a></li>
                    <li class="breadcrumb__item"><a href="#">Navigation</a></li>
                    <li
                        class="breadcrumb__item 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="breadcrumb breadcrumb--slash">
                    <li class="breadcrumb__item"><a href="#">Home</a></li>
                    <li class="breadcrumb__item"><a href="#">Section</a></li>
                    <li
                        class="breadcrumb__item breadcrumb__item--active"
                        aria-current="page"
                    >
                        Page
                    </li>
                </ol>
            </nav>

#### Arrow Separator

HTML

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

#### Chevron Separator

HTML

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

#### Dot Separator

HTML

    <nav aria-label="Breadcrumb">
                <ol class="breadcrumb breadcrumb--dot">
                    <li class="breadcrumb__item"><a href="#">Home</a></li>
                    <li class="breadcrumb__item"><a href="#">Section</a></li>
                    <li
                        class="breadcrumb__item 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="breadcrumb">
                    <li class="breadcrumb__item">
                        <a href="#" aria-label="Home">
                            <span class="breadcrumb__icon">🏠</span>
                        </a>
                    </li>
                    <li class="breadcrumb__item"><a href="#">Products</a></li>
                    <li
                        class="breadcrumb__item breadcrumb__item--active"
                        aria-current="page"
                    >
                        Details
                    </li>
                </ol>
            </nav>

#### Icons on All Items

HTML

    <nav aria-label="Breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb__item">
                        <a href="#">
                            <span class="breadcrumb__icon">🏠</span>
                            <span>Home</span>
                        </a>
                    </li>
                    <li class="breadcrumb__item">
                        <a href="#">
                            <span class="breadcrumb__icon">📁</span>
                            <span>Folder</span>
                        </a>
                    </li>
                    <li
                        class="breadcrumb__item breadcrumb__item--active"
                        aria-current="page"
                    >
                        <span class="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="breadcrumb">
                    <li class="breadcrumb__item"><a href="#">Home</a></li>
                    <li class="breadcrumb__item breadcrumb__item--collapsed">
                        <button
                            class="breadcrumb__expand"
                            aria-label="Show hidden items"
                        >
                            ...
                        </button>
                    </li>
                    <li class="breadcrumb__item"><a href="#">Parent</a></li>
                    <li
                        class="breadcrumb__item breadcrumb__item--active"
                        aria-current="page"
                    >
                        Current
                    </li>
                </ol>
            </nav>

### Breadcrumb Sizes

Different size variations.

#### Size Variations

HTML

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

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

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

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!