Aeroporto di Bologna - Design System

Breadcrumb 

<nav class="c-breadcrumb" aria-label="Breadcrumb">
    <ol class="c-breadcrumb__list">
        <li class="c-breadcrumb__list-item">
            <a class="c-breadcrumb__link" href="#">Home</a>
        </li>
        <li class="c-breadcrumb__list-item">
            <a class="c-breadcrumb__link" href="#">Come muoversi all’interno dell’aeroporto</a>
        </li>
        <li class="c-breadcrumb__list-item">
            [...]
        </li>
        <li class="c-breadcrumb__list-item">
            <a class="c-breadcrumb__link" href="#">Page 5</a>
        </li>
        <li class="c-breadcrumb__list-item" aria-current="page">
            Current page
        </li>
    </ol>
</nav>
 
<nav class="c-breadcrumb{{#if modifier}} {{modifier}}{{/if}}" aria-label="Breadcrumb">
  <ol class="c-breadcrumb__list">
    {{#each items}}
    <li class="c-breadcrumb__list-item"{{#if isCurrent}} aria-current="page"{{/if}}>
      {{#if url }}
        <a class="c-breadcrumb__link" href="{{ url }}">{{{ text }}}</a>
      {{else}}
        {{{text}}}
      {{/if}}
    </li>
    {{/each}}
  </ol>
</nav>
 
{
  "items": [
    {
      "url": "#",
      "text": "Home"
    },
    {
      "url": "#",
      "text": "Come muoversi all’interno dell’aeroporto"
    },
    {
      "text": "[...]"
    },
    {
      "url": "#",
      "text": "Page 5"
    },
    {
      "text": "Current page",
      "isCurrent": true
    }
  ]
}
  • Content: 
    .c-breadcrumb {
  margin-bottom: remify(24px);
}

html:has(.c-slim-alert) .c-breadcrumb {
  @include min-screen(bp(tablet-p)) {
    margin-top: remify(40px);
  }
}

.c-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: remify(4px);
}

.c-breadcrumb__list-item {
  color: primary(night, 80);
  margin-bottom: 0;
  position: relative;
  padding-left: remify(18px);
  @include font-scale(level-1-5);

  &:before {
    content: "";
    position: absolute;
    left: 0;
    width: remify(6px);
    aspect-ratio: 1 / 1;
    display: inline-block;
    border-top: remify(1px) solid currentColor;
    border-right: remify(1px) solid currentColor;
    transform: rotate(45deg) translateY(-50%);
    top: 50%;
  }

  &:first-child {
    padding-left: 0;

    &::before {
      display: none;
    }
  }

}

.c-breadcrumb__link {
  color: currentColor;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  max-width: remify(150px);

  &:hover {
    color: primary(night, 120);
  }
}

/*------------------------------------*\
  Modifier: Inverted
\*------------------------------------*/
.c-breadcrumb--inverted {

  .c-breadcrumb__list-item {
    color: secondary(basic-white, 100);
  }

  .c-breadcrumb__link {
    &:hover {
      color: currentColor;
    }
  }

}
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/views/02-molecules/breadcrumb/_breadcrumb.scss
  • Size: 1.3 KB

No notes defined.