BFNA Design System

Breadcrumbs 

<div class="breadcrumbs">

    <a class="breadcrumbs__page-link" href="/">Home</a>
    <svg class="breadcrumbs__divider" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>

    <a class="breadcrumbs__page-link" href="/democracy/">Democracy</a>
    <svg class="breadcrumbs__divider" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>

    <span class="breadcrumbs__current-page">Cyber Democracy</span>
</div>
 
<div class="breadcrumbs">
    {% for item in breadcrumbs %}
        <a class="breadcrumbs__page-link" href="{{item.link}}">{{item.title}}</a>
        <svg class="breadcrumbs__divider" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
    {% endfor %}
    <span class="breadcrumbs__current-page">{{currentPage}}</span>
</div>
 
{
  "breadcrumbs": [
    {
      "link": "/",
      "title": "Home"
    },
    {
      "link": "/democracy/",
      "title": "Democracy"
    }
  ],
  "currentPage": "Cyber Democracy"
}
  • Content: 
    // Structure
.breadcrumbs {
  padding: 0.5rem 0;
  font-weight: 300;
  
  &__divider {
    height: 1rem;
    vertical-align: middle;
  }
}

// Visuals
.breadcrumbs {
  font-size: 0.75rem;

  &__page-link {
    text-decoration: none;
    color: var(--color-navy);
  }

  &__current-page{
    font-weight: bold;
  }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: src/components/03-components/breadcrumbs/breadcrumbs.scss
  • Size: 315 Bytes

There are no notes for this item.