Foehn Design System

Breadcrumb 

<nav aria-label="Fil d'Ariane">
    <h2 class="sr-only">File d'Ariane</h2>
    <ol class="breadcrumb">

        <li class="breadcrumb-item"><a href="#">level 1</a></li>

        <li class="breadcrumb-item"><a href="#">level 2</a></li>

        <li class="sr-only" aria-current="page">level 3</li>

    </ol>
</nav>
 
<nav{% if styleModifier %} class="{{ styleModifier }}"{% endif %} aria-label="Fil d'Ariane">
  <h2 class="sr-only">File d'Ariane</h2>
  <ol class="breadcrumb">
    {% for item in breadcrumb %}
      {%-if item.page %}
      {% if not loop.last %}
        <li class="breadcrumb-item"><a href="{{ item.url }}">{{ item.page }}</a></li>
      {% else %}
        <li class="sr-only" aria-current="page">{{ item.page  }}</li>
      {% endif %}
      {%- endif %}
    {% endfor %}
  </ol>
</nav>
 
{
  "breadcrumb": [
    {
      "page": "level 1",
      "url": "#"
    },
    {
      "page": "level 2",
      "url": "#"
    },
    {
      "page": "level 3",
      "url": "#"
    }
  ]
}
  • Content: 
    @charset 'UTF-8';

/**
 * Breadcrumb
 *
 * 1. Hacks that allow the pattern background set with `vd-bg-pattern-gray` to
 *    aligne nicely between the breadcrum and the title
 * 2. Set space around the arrows
 * 3. Set position of the arrows
 */

.breadcrumb-item {
  @include media-breakpoint-down(sm) {
    min-height: 1.5rem; /* [1] */
    font-size: $small-font-size;
  }
}

.breadcrumb-item + .breadcrumb-item::before {
  position: absolute; /* [3] */
  left: 0;
}

.breadcrumb-item + .breadcrumb-item {
  margin-left: 0.25rem; /* [2] */
  position: relative; /* [3] */
  padding-left: 0.75rem; /* [2] */
}
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/components/02-molecules/navigation/breadcrumb/_breadcrumb.scss
  • Size: 612 Bytes

No notes defined.