Breadcrumbs

Breadcrumbs are navigational components that display to the user their place in the hierarchy.

Installation

Coming soon..

Examples

<nav aria-label="breadcrumb">
    <ul class="co-breadcrumb co-breadcrumb--ellipsis">
         <li>
            <button class="co-icon-button co-icon-button--primary co-icon-button--small"
            aria-label="navigate to home link" type="button" onclick="#addlocationhere">
                <i class="co-icon-24__home"></i>
            </button>
        </li>
        <li><a href="#">Home</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">Subcategory</a></li>
        <li><a href="#">Very Long Breadcrumb Name That Should Be Truncated</a></li>
        <li>Child</li>
    </ul>
</nav>

Breadcrumb with iconbutton, ellipsis and long name

<nav aria-label="breadcrumb" dataTheme="invert">
    <ul class="co-breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Grand parent</a></li>
        <li><a href="#">Parent</a></li>
        <li>Child</li>
    </ul>
</nav>

Breadcrumb - Invert theme

Class list

Class name	Description
co-breadcrumb--ellipsis	Use this class when the breadcrumb has lengthy name. It will collapse on its own and display ellipses to indicate that there's more information available.

Accessibility

Attribute name	Description
aria-label="breadcrumb"	Provides a label that describes the type of navigation provided in the nav element.

Properties

Property	Description	Usage
dataTheme	To display the breadcrumb in inverted theme	dataTheme=”invert”