College of Business Style Guide

Breadcrumb 

<ul class="bread">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Directory</a>
    </li>
    <li>
        Jane Smith
    </li>
</ul>
 
<ul class="bread">
  {% for link in links %}
    <li>
      {% if link.active_link %}
        <a href="{{ link.url }}">{{ link.page_name }}</a>
      {% else %}
        {{ link.page_name }}
      {% endif %}
    </li>
  {% endfor %}
</ul>
 
{
  "links": {
    "1": {
      "url": "#",
      "page_name": "Home",
      "active_link": "yes"
    },
    "2": {
      "url": "#",
      "page_name": "Directory",
      "active_link": "yes"
    },
    "3": {
      "url": "#",
      "page_name": "Jane Smith"
    }
  }
}
  • Content: 
    .bread {
  @include reset-list-nav;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  li {
    color: $grey_dark;

    a {
      color: $grey_dark;
    }

    &::after {
      content: "/";
      margin: 0 2px;
    }

    &:last-of-type {
      &::after {
        content: '';
        margin: 0;
      }
    }
  }
}
  • URL: /components/raw/breadcrumb/breadcrumb.scss
  • Filesystem Path: components/02-pieces/03-menus/04-breadcrumb/breadcrumb.scss
  • Size: 329 Bytes

No notes defined.