Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Breadcrumb 

<!-- Default -->
<nav class=" breadcrumb ">
      <ul class="breadcrumb__list">
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Abwasser</a>
          </li>
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Kanalbau</a>
          </li>
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Kanalrohre</a>
          </li>
      </ul>
  </nav>


<!-- Short -->
<nav class=" breadcrumb ">
      <ul class="breadcrumb__list">
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Abwasser</a>
          </li>
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Kanalbau</a>
          </li>
      </ul>
  </nav>


<!-- Very Long -->
<nav class=" breadcrumb ">
      <ul class="breadcrumb__list">
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Handwerker & Bauunternehmer</a>
          </li>
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Tiefbau</a>
          </li>
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Abwasser</a>
          </li>
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Kanalbau</a>
          </li>
          <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="#">Kanalrohre</a>
          </li>
      </ul>
  </nav>


{{#breadcrumbs}}
  <nav class="{{mixes}} breadcrumb {{modifiers}}">
    <ul class="breadcrumb__list">
      {{#each links}}
        <li class="breadcrumb__item">
          <a class="breadcrumb__link" href="{{{link}}}">{{{title}}}</a>
        </li>
      {{/each}}
    </ul>
  </nav>
{{/breadcrumbs}}
 
/* Default */
{
  "breadcrumbs": {
    "links": [
      {
        "title": "Abwasser",
        "link": "#"
      },
      {
        "title": "Kanalbau",
        "link": "#"
      },
      {
        "title": "Kanalrohre",
        "link": "#"
      }
    ]
  }
}


/* Short */
{
  "breadcrumbs": {
    "links": [
      {
        "title": "Abwasser",
        "link": "#"
      },
      {
        "title": "Kanalbau",
        "link": "#"
      }
    ]
  }
}


/* Very Long */
{
  "breadcrumbs": {
    "links": [
      {
        "title": "Handwerker & Bauunternehmer",
        "link": "#"
      },
      {
        "title": "Tiefbau",
        "link": "#"
      },
      {
        "title": "Abwasser",
        "link": "#"
      },
      {
        "title": "Kanalbau",
        "link": "#"
      },
      {
        "title": "Kanalrohre",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    .breadcrumb {
  $root: &;

  $margin: map-get($grid-gutters, 'medium');
  $half-margin: rem-calc($margin/2);
  $quater-margin: rem-calc($margin / 4);
  $three-quarters: rem-calc($margin * 0.75);
  $three-halves: rem-calc($margin * 1.5);

  @include typography-level('breadcrumb');
  color: $gray-darker;

  &__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: $three-halves;
    padding: $three-quarters 0;
    list-style: none;
  }

  &__item {
    position: relative;
    display: block;
    margin: $quater-margin 0;

    a {
      color: inherit;
    }

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      color: $primary;

      &::after {
        display: none;
      }
    }

    &::after {
      $symbol: map-get($icons, 'chevron-right');
      @include icon-content-extended($symbol);
      position: absolute;
      top: 0.125em;
      right: -$margin;
    }
  }
}
  • URL: /components/raw/molecules-breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/26-breadcrumb/_breadcrumb.scss
  • Size: 910 Bytes

There are no notes for this item.