Breadcrumb

Open in Figma View all breadcrumb renders

Inactive breadcrumb

<div class="breadcrumb breadcrumb--first">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 1</span>
</div>

<div class="breadcrumb">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 2</span>
</div>

<div class="breadcrumb breadcrumb--last">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 3</span>
</div>

Active breadcrumb

<div class="breadcrumb breadcrumb--first breadcrumb--active">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 1</span>
</div>

<div class="breadcrumb breadcrumb--active">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 2</span>
</div>

<div class="breadcrumb breadcrumb--last breadcrumb--active">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 3</span>
</div>

Complete breadcrumb

<div class="breadcrumb breadcrumb--first breadcrumb--complete">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 1</span>
</div>

<div class="breadcrumb breadcrumb--complete">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 2</span>
</div>

<div class="breadcrumb breadcrumb--last breadcrumb--complete">
    <div class="breadcrumb__line">
        <div class="breadcrumb__circle"></div>
    </div>
    <span class="breadcrumb__text">Step 3</span>
</div>

Variations and modifiers

Breadcrumb sizes

<div class="padding-m-vertical">
    <div class="breadcrumb breadcrumb--active breadcrumb--large">
        <div class="breadcrumb__line">
            <div class="breadcrumb__circle"></div>
        </div>
        <span class="breadcrumb__text">Large</span>
    </div>
</div>

<div class="padding-m-vertical">
    <div class="breadcrumb breadcrumb--active">
        <div class="breadcrumb__line">
            <div class="breadcrumb__circle"></div>
        </div>
        <span class="breadcrumb__text">Medium</span>
    </div>
</div>

<div class="padding-m-vertical">
    <div class="breadcrumb breadcrumb--active breadcrumb--small">
        <div class="breadcrumb__line">
            <div class="breadcrumb__circle"></div>
        </div>
        <span class="breadcrumb__text">Small</span>
    </div>
</div>

Vertical breadcrumb

<div>
    <div class="flex flex-wrap">
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--first breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--last breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap">
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--active breadcrumb--first breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--active breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--active breadcrumb--last breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap">
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--complete breadcrumb--first breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--complete breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
        <div class="padding-m">
            <div class="breadcrumb breadcrumb--vertical breadcrumb--complete breadcrumb--last breadcrumb--large">
                <div class="breadcrumb__line">
                    <div class="breadcrumb__circle"></div>
                </div>
                <span class="breadcrumb__text">Step</span>
            </div>
        </div>
    </div>
</div>

Progress bar

<div style="width: 100%">
    <div class="progress-bar">
        <div class="breadcrumb breadcrumb--active breadcrumb--first">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your details</span>
        </div>
        <div class="breadcrumb">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your car</span>
        </div>
        <div class="breadcrumb">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your cover</span>
        </div>
        <div class="breadcrumb breadcrumb--last">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Quote</span>
        </div>
    </div>

    <div class="content-spacing"></div>

    <div class="progress-bar">
        <div class="breadcrumb breadcrumb--complete breadcrumb--first">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your details</span>
        </div>
        <div class="breadcrumb breadcrumb--active">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your car</span>
        </div>
        <div class="breadcrumb">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your cover</span>
        </div>
        <div class="breadcrumb breadcrumb--last">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Quote</span>
        </div>
    </div>

    <div class="content-spacing"></div>

    <div class="progress-bar">
        <div class="breadcrumb breadcrumb--complete breadcrumb--first">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your details</span>
        </div>
        <div class="breadcrumb breadcrumb--complete">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your car</span>
        </div>
        <div class="breadcrumb breadcrumb--active">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your cover</span>
        </div>
        <div class="breadcrumb breadcrumb--last">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Quote</span>
        </div>
    </div>

    <div class="content-spacing"></div>

    <div class="progress-bar">
        <div class="breadcrumb breadcrumb--complete breadcrumb--first">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your details</span>
        </div>
        <div class="breadcrumb breadcrumb--complete">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your car</span>
        </div>
        <div class="breadcrumb breadcrumb--complete">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Your cover</span>
        </div>
        <div class="breadcrumb breadcrumb--active breadcrumb--last">
            <div class="breadcrumb__line">
                <div class="breadcrumb__circle"></div>
            </div>
            <span class="breadcrumb__text">Quote</span>
        </div>
    </div>
</div>