Breadcrumbs

Usage

See design usage guidelines

The breadcrumb component provides users with a visual indicator of their current location within a navigational hierarchy.

This document outlines the design specifications for a breadcrumb component with up to 8 steps, covering its default, hover, active, and disabled states.

Examples

Name 1o-chevron-rightName 2o-chevron-rightName 3o-chevron-rightName 4o-chevron-rightName 5o-chevron-rightName 6o-chevron-rightEnd

<div class="breadcrumb">
    <span class="item">Name 1</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 2</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 3</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 4</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 5</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 6</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item active">End</span>
</div>

Disabled

Name 1o-chevron-rightName 2o-chevron-rightName 3o-chevron-rightName 4o-chevron-rightName 5o-chevron-rightName 6o-chevron-rightEnd

<div class="breadcrumb">
    <span class="item">Name 1</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item" disabled>Name 2</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item" disabled>Name 3</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 4</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 5</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item">Name 6</span>
    <span class="u-icon u-icon-24">o-chevron-right</span>
    <span class="item active">End</span>
</div>

Usage Guidelines