@zplane-web/craft-licensing

Breadcrumb 

<nav class="breadcrumb" aria-label="Current position on site">
    <ol class="breadcrumb__crumbs" role="list">
        <li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-icon"><svg class="icon icon--house" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#house"></use>
                    </svg></span><span class="breadcrumb__link-text u-hidden-visually">Startseite</span></a><svg class="icon icon--angle-right breadcrumb__arrow" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-right"></use>
            </svg></li>
        <li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-icon"><svg class="icon icon--arrow-turn-down-right" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-turn-down-right"></use>
                    </svg></span><span class="breadcrumb__link-text">Unterseite</span></a><svg class="icon icon--angle-right breadcrumb__arrow" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-right"></use>
            </svg></li>
        <li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#" aria-current="page"><span class="breadcrumb__link-icon"><svg class="icon icon--arrow-turn-down-right" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-turn-down-right"></use>
                    </svg></span><span class="breadcrumb__link-text">Artikel</span></a></li>
    </ol>

    <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': 'Current position on site' | t('site'),
}, attrs ?? {}) }}>
  <ol class="breadcrumb__crumbs" role="list">
    {% apply spaceless %}
      {% for item in items %}
        <li class="breadcrumb__crumb">
          <a {{ html_attributes({
            class: ['breadcrumb__link', 'u-underline'],
            href: item.link,
            'aria-current': loop.last ? 'page',
          }) }}>
            <span class="breadcrumb__link-icon">
              {% include '@icon' with { icon: loop.first ? 'house' : 'arrow-turn-down-right' } only %}
            </span>

            <span class="breadcrumb__link-text{{ loop.first ? ' u-hidden-visually' }}">
              {{- item.text -}}
            </span>
          </a>

          {% if not loop.last %}
            {% include '@icon' with {
              icon: 'angle-right',
              class: 'breadcrumb__arrow',
            } only %}
          {% endif %}
        </li>
      {% endfor %}
    {% endapply %}
  </ol>

  <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: 
    .breadcrumb {
  color: var(--breadcrumb-color, var(--color-gray-600));
  container-name: breadcrumb;
  container-type: inline-size;
  font-size: var(--breadcrumb-font-size, var(--font-size-small));
  font-weight: var(--breadcrumb-font-width, var(--font-weight-regular));
  line-height: var(--breadcrumb-line-height, var(--line-height-narrow));
}

.breadcrumb__crumbs {
  padding-block-end: 0.4em;
}

.breadcrumb__crumb {
  display: inline;

  @container breadcrumb (inline-size < 50rem) {
    &:not(:nth-last-child(2)) {
      display: none;
    }
  }
}

.breadcrumb__arrow {
  color: var(--breadcrumb-arrow-color, inherit);
  font-size: 0.8em;
  margin-inline: 1em;
  vertical-align: -0.1em;

  @container breadcrumb (inline-size < 50rem) {
    display: none;
  }
}

.breadcrumb__link-icon {
  color: var(--breadcrumb-icon-color, inherit);
  font-size: 1.2em;
  margin-inline-end: 0.5em;
  vertical-align: 0.1em;

  @container breadcrumb (inline-size >= 50rem) {
    .breadcrumb__crumb:first-child & {
      margin-inline-end: 0;
    }

    .breadcrumb__crumb:not(:first-child) & {
      display: none;
    }
  }
}
  • URL: /components/raw/breadcrumb/breadcrumb.scss
  • Filesystem Path: src/components/3-molecules/breadcrumb/breadcrumb.scss
  • Size: 1.1 KB

No notes defined.