E3 Alliance Pattern Library

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">
                Our Work</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">
                Interior 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">
                Child Page 2
            </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>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "background": "dark",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Our Work",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    },
    {
      "title": "Child Page 2",
      "url": "#"
    }
  ]
}
  • Content: 
    .breadcrumbs
    --borderColor jet
    --borderColorActive e3Green
    --currentItemColor jet
    --itemColorActive e3Green
    --iconColor greenApple
    --textColor sapphire

    &--dark
        --borderColor white
        --borderColorActive darkSapphire
        --currentItemColor white
        --itemColorActive darkSapphire
        --iconColor white
        --textColor white

    &__list
        display flex
        flex-wrap wrap

    &__item
        margin-right 8px

    &__item-link
        border-bottom 1px solid var(--borderColor)
        color var(--textColor)
        font-weight 600
        text-decoration none

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

    &__item-current
        font-size 20px
        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: 1.1 KB

No notes defined.