AFW Pattern Lab

Breadcrumbs 

<nav class="breadcrumb" aria-label="Breadcrumb">
    <ol class="breadcrumb__list">
        <li class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">Home</a>
        </li>
        <li class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">Grandparent</a>
        </li>
        <li class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">Parent</a>
        </li>
        <li class="breadcrumb__item">
            <a href="#" class="breadcrumb__link" aria-current="page">Children</a>
        </li>
    </ol>
</nav>
 
<nav class="breadcrumb" aria-label="Breadcrumb">
    <ol class="breadcrumb__list">
        {% for link in links -%}
        <li class="breadcrumb__item">
            <a href="{{link.href}}" class="breadcrumb__link"{% if loop.last %} aria-current="page"{% endif %}>{{link.text|safe}}</a>
        </li>
        {%- endfor %}
    </ol>
</nav>
 
{
  "links": [
    {
      "href": "#",
      "text": "Home"
    },
    {
      "href": "#",
      "text": "Grandparent"
    },
    {
      "href": "#",
      "text": "Parent"
    },
    {
      "href": "#",
      "text": "Children"
    }
  ]
}
  • Content: 
    .breadcrumb {
    $this: &;

    padding-block: rem(16px);

    &__list {
        display: inline-flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__item {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;

        &:after {
            content: '/';
            display: block;
            margin-inline: rem(6px);
        }

        &:last-of-type {
            &:after {
                display: none;
            }

            #{$this}__link {
                color: $color-gray-darker;
                font-weight: 400;
                pointer-events: none;
            }
        }
    }

    &__link {
        color: $color-primary-blue;
        font-size: rem(15px);
        font-weight: 700;
        text-decoration: none;

        &:hover,
        &:focus {
            color: $color-blue;
            text-decoration: none;
        }
    }
}
  • URL: /components/raw/breadcrumb/breadcrumb.scss
  • Filesystem Path: source/patterns/molecules/breadcrumb/breadcrumb.scss
  • Size: 933 Bytes

No notes defined.