Is a navigation element that indicates the current page's location within a hierarchy. It is typically displayed as a horizontal list of links, with the current page represented by the last link in the list.

- null-breadcrumb-solidus

<section class="null-breadcrumb-section null-background-light-grey">
<div class="null-container">
        <nav class="null-breadcrumb-container null-breadcrumb-solidus null-padding-top-20 null-padding-bottom-20">
    
            <ul class="null-breadcrumb-items null-display-flex null-flex-wrap-wrap" aria-label="Breadcrumb Navigation">
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Home </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Media </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Photos </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link active" href="javascript:void(null)" aria-current="true"> Cars </a>
                </li><!--End null-breadcrumb-link-item-->
    
            </ul><!--End null-breadcrumb-items-->
    
        </nav><!--End null-breadcrumb-container-->
</div><!--End null-container-->
</section><!--End null-breadcrumb-section-->

- null-breadcrumb-arrow

<section class="null-breadcrumb-section null-background-light-grey">
<div class="null-container">
        <nav class="null-breadcrumb-container null-breadcrumb-arrow null-padding-top-20 null-padding-bottom-20">
    
            <ul class="null-breadcrumb-items null-display-flex null-flex-wrap-wrap" aria-label="Breadcrumb Navigation">
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Home </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Media </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Photos </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link active" href="javascript:void(null)" aria-current="true"> Cars </a>
                </li><!--End null-breadcrumb-link-item-->
    
            </ul><!--End null-breadcrumb-items-->
    
        </nav><!--End null-breadcrumb-container-->
</div><!--End null-container-->
</section><!--End null-breadcrumb-section-->

To center the breadcrumb items, add ".null-justify-content-center" class to the element with the class ".null-breadcrumb-items"

<section class="null-breadcrumb-section null-background-light-grey">
<div class="null-container">
        <nav class="null-breadcrumb-container null-breadcrumb-arrow null-padding-top-20 null-padding-bottom-20">
    
            <ul class="null-breadcrumb-items null-display-flex null-flex-wrap-wrap null-justify-content-center" aria-label="Breadcrumb Navigation">
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Home </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Media </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Photos </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link active" href="javascript:void(null)" aria-current="true"> Cars </a>
                </li><!--End null-breadcrumb-link-item-->
    
            </ul><!--End null-breadcrumb-items-->
    
        </nav><!--End null-breadcrumb-container-->
</div><!--End null-container-->
</section><!--End null-breadcrumb-section-->

To align the breadcrumb items to the end of the container based on the page direction, add ".null-justify-content-flex-end" class to the element that has class ".null-breadcrumb-items"

<section class="null-breadcrumb-section null-background-light-grey">
<div class="null-container">
        <nav class="null-breadcrumb-container null-breadcrumb-arrow null-padding-20">
    
            <ul class="null-breadcrumb-items null-display-flex null-flex-wrap-wrap null-justify-content-flex-end" aria-label="Breadcrumb Navigation">
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Home </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Media </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link" href="javascript:void(null)"> Photos </a>
                </li><!--End null-breadcrumb-link-item-->
    
                <li class="null-breadcrumb-item null-display-flex">
                    <a class="null-breadcrumb-item-link active" href="javascript:void(null)" aria-current="true"> Cars </a>
                </li><!--End null-breadcrumb-link-item-->
    
            </ul><!--End null-breadcrumb-items-->
    
        </nav><!--End null-breadcrumb-container-->
</div><!--End null-container-->
</section><!--End null-breadcrumb-section-->