University of Florida College of the Arts 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">•</span>
        </li>
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__item-link">
                Primary Page One</a><span class="breadcrumbs__separator">•</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">•</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 blue500
    --currentItemColor grey500
    --iconColor grey500
    --textColor blue500
    --textColorActive blue200
    --borderColorActive blue200

    +below(breakpointHeaderLarge)
        display none

    &--dark
        --borderColor white
        --currentItemColor warmGray1
        --iconColor warmGray1
        --textColor white

    &__list
        display flex
        flex-wrap wrap
        position relative
        z-index 1

    &__item
        margin-right 8px

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

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

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

    &__separator
        color var(--iconColor)
        display inline-block
        margin-left 8px
        position relative
        top -1px
  • URL: /components/raw/breadcrumbs/breadcrumbs.styl
  • Filesystem Path: patterns/partials/navigation/breadcrumbs/breadcrumbs.styl
  • Size: 1.1 KB

No notes defined.