Breadcrumb

stablev1.0.0

The breadcrumb component is a navigation composed by a list of links based on the page's location in the content hierarchy.

Overview

The breadcrumb component consists of links which are aligned side by side and separated by a divider, the homepage is represented by a house icon.

Usage

Dependencies

To get the breadcrumb component working, include the dependencies in your project in the following order:

  1. npm
  2. Pug
  3. Sass
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

include /node_modules/design-system/src/pug/01-atoms/icon

@import 'design-system/src/scss/01-atoms/icon';
@import 'design-system/src/scss/02-molecules/breadcrumb';

Basic code

The breadcrumb is composed by a nav containing an orginised list of links. Breadcrumb List from schema.org is used as micro data.

  1. HTML
  2. Pug
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
    <li class="breadcrumb__item" itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a class="breadcrumb__home" href="/" data-toggle="tooltip" itemprop="item" title="Homepage">
        <svg class="icon icon--16 icon--primary icon--left" aria-hidden="true">
          <use xlink:href="#icon-home"></use>
        </svg>
        <span class="u-sr-only" itemprop="name">Homepage</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <li class="breadcrumb__item" itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a href="#" aria-current="page" itemprop="item">
        <span itemprop="name">Level 2</span>
      </a>
      <meta itemprop="position" content="2">
    </li>
  </ol>
</nav>

nav(aria-label="Breadcrumb")
  ol.breadcrumb(itemscope='', itemtype='http://schema.org/BreadcrumbList')
    li.breadcrumb__item(itemscope='', itemprop='itemListElement', itemtype='http://schema.org/ListItem')
      a.breadcrumb__home(href='/', data-toggle='tooltip', itemprop='item', title="Homepage")
        +icon('home-filled', '16', 'primary', 'left')
        span.u-sr-only(itemprop='name') Homepage
      meta(itemprop='position', content='1')
    li.breadcrumb__item(itemscope='', itemprop='itemListElement', itemtype='http://schema.org/ListItem')
      a(href='#', aria-current='page', itemprop='item')
        span(itemprop='name') Level 2
      meta(itemprop='position', content='2')