@e-fellows/website-2022

Breadcrumb: Standard 

<nav class="breadcrumb" aria-label="Deine aktuelle Position:">
    <ul class="breadcrumb__list u-line-clamp">
        <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__icon"><svg class="icon icon--home" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#home"></use>
                    </svg></span><span class="breadcrumb__link-text u-hidden-visually">Startseite</span></a></li>
        <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-text">Unterseite</span></a></li>
        <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" aria-current="page"><span class="breadcrumb__link-text">Artikel</span></a></li>
    </ul>

    <script type="application/ld+json">
        {
            "@context": "https:\/\/schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [{
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Startseite",
                    "item": "#"
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "Unterseite",
                    "item": "#"
                },
                {
                    "@type": "ListItem",
                    "position": 3,
                    "name": "Artikel",
                    "item": "#"
                }
            ]
        }
    </script>
</nav>
 
<nav {{ html_attributes({
  id: id ?? false,
  class: 'breadcrumb',
  'aria-label': 'Your current position:' | t('site'),
}, attrs ?? {}) }}>
  <ul class="breadcrumb__list u-line-clamp">
    {% apply spaceless %}
      {% for item in items %}
        <li class="breadcrumb__item">
          <a {{ html_attributes({
            class: {
              'breadcrumb__link': true,
              'u-underline': true,
            },
            href: not loop.last ? (item.link ?? false),
            'aria-current': loop.last ? 'page',
          }) }}>
            {% if loop.first %}
              <span class="breadcrumb__icon">
                {% include '@icon' with { icon: 'home' } only %}
              </span>
            {% endif %}

            <span {{ html_attributes({
              class: {
                'breadcrumb__link-text': true,
                'u-hidden-visually': loop.first,
              },
            }) }}>
              {{- item.text -}}
            </span>
          </a>
        </li>
      {% endfor %}
    {% endapply %}
  </ul>

  <script type="application/ld+json">
    {{ {
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      'itemListElement': items | map((item, index) => {
        '@type': 'ListItem',
        'position': index + 1,
        'name': item.text | replace({ '|': '' }),
        'item': item.link,
      }),
    } | json_encode(constant('JSON_PRETTY_PRINT')) | raw('json') }}
  </script>
</nav>
 
{
  "items": [
    {
      "text": "Startseite",
      "link": "#"
    },
    {
      "text": "Unterseite",
      "link": "#"
    },
    {
      "text": "Artikel",
      "link": "#"
    }
  ]
}
  • Content: 
    :root {
  --breadcrumb-text-color: var(--color-midnight);
  --breadcrumb-icon-color: var(--breadcrumb-text-color);
  --breadcrumb-icon-background-color: transparent;
  --breadcrumb-font-size: 1.3rem;
}

.breadcrumb {
  --focus-outline-offset: 2px;
}

.breadcrumb__list {
  --line-clamp: 3;

  color: var(--breadcrumb-text-color);
  flex-shrink: 0;
  font-size: var(--breadcrumb-font-size);
  line-height: var(--line-height-body);
  list-style: none;
  margin: -0.5rem;
  padding: 0.5rem;
}

.breadcrumb__item {
  display: inline;

  &:not(:last-child)::after {
    background-color: currentColor;
    block-size: 1px;
    content: '';
    display: inline-block;
    inline-size: 5px;
    margin-inline: 1rem;
    vertical-align: 0.4rem;
  }
}

.breadcrumb__link {
  &:any-link:is(:hover, :focus) {
    --breadcrumb-icon-color: #fff;
    --breadcrumb-icon-background-color: var(--breadcrumb-text-color);
  }

  &:not(:any-link) {
    cursor: default;
  }

  &:is([aria-current='page']) {
    font-weight: 700;
  }
}

.breadcrumb__icon {
  background-color: var(--breadcrumb-icon-background-color);
  block-size: 2.3rem;
  border-radius: 50%;
  color: var(--breadcrumb-icon-color);
  display: inline-block;
  font-size: 1.5rem;
  line-height: 0;
  margin: -0.4rem;
  padding: 0.4rem;
  transition-property: background-color, color;
  vertical-align: 0.2rem;
}
  • URL: /components/raw/breadcrumb/breadcrumb.scss
  • Filesystem Path: src/components/2-molecules/breadcrumb/breadcrumb.scss
  • Size: 1.4 KB

No notes defined.