Custom theme (replace with client name)

Breadcrumbs: On Dark 

<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--dark">
    <ul class="breadcrumbs__list">
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__item-link">
                Home</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
                    <path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
                </svg>
            </span>
        </li>
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__item-link">
                Primary Page One</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
                    <path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
                </svg>
            </span>
        </li>
        <li class="breadcrumbs__item">
            <span class="breadcrumbs__item-current">
                Interior Page One
            </span>
        </li>
    </ul>
</nav>
 
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--{{ background }}">
    <ul class="breadcrumbs__list">
        {% for item in breadcrumbs %}
            <li class="breadcrumbs__item">
                {% if loop.last %}
                    <span class="breadcrumbs__item-current">
                        {{ item.title }}
                    </span>
                {% else %}
                    <a href="{{ item.url }}" class="breadcrumbs__item-link">
                        {{ item.title }}</a><span class="breadcrumbs__separator">{% include 'bits/icons/right-triangle.twig' %}</span>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>
 
{
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "background": "dark"
}
  • Content: 
    .breadcrumbs
    --borderColor charcoal
    --currentItemColor grayDarkest
    --iconColor smokeDarkest
    --textColor charcoal

    &--dark
        --borderColor white
        --currentItemColor gray
        --iconColor grayDarkest
        --textColor white

    &__list
        display flex
        flex-wrap wrap

    &__item
        margin-right 8px

    &__item-link
        @extends $linkSmall
        border-bottom 1px solid var(--borderColor)
        color var(--textColor)
        text-decoration none

        &:focus
        &:hover
        &:active
            border-bottom-color var(--borderColor)

    &__item-current
        @extends $bodySmall
        color var(--currentItemColor)

    &__separator
        margin-left 8px
        display inline-block
        position relative
        top -1px

        & svg
            & .icon-right-triangle__shape
                fill var(--iconColor)
  • URL: /components/raw/breadcrumbs/breadcrumbs.styl
  • Filesystem Path: patterns/partials/navigation/breadcrumbs/breadcrumbs.styl
  • Size: 909 Bytes

No notes defined.