Breadcrumbs

Download

You can fetch Trowel Breadcrumbs with npm, yarn or bower.

# With bower
$ bower install --save trowel-breadcrumbs

# With npm
$ npm install --save trowel-breadcrumbs

# With yarn
$ yarn add trowel-breadcrumbs

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/breadcrumbs.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Breadcrumbs
@import './path/to/dependencies/trowel-breadcrumbs/src/scss/breadcrumbs';

JavaScript

You have several javascript files for different use cases :

• The browser ready file is available at ./dest/javascript/breadcrumbs.js (a minified version exists at dest/javascript/breadcrumbs.min.js)
• The script written in es2015 and ready to import is available at ./src/javascript/breadcrumbs.js

Usage

<nav class="breadcrumb" data-flag="breadcrumb">
  <div class="breadcrumb__header">
    <button class="breadcrumb__toggle" data-breadcrumb="toggle">Previous pages</button>
    <a class="breadcrumb__back" onclick="history.go(-1)">Back</a>
  </div>

  <ul class="breadcrumb__list" data-breadcrumb="list" data-state="hidden">
    <li class="breadcrumb__list-item">
      <a class="breadcrumb__item" href="#">item 1</a>
    </li>

    <li class="breadcrumb__list-item">
      <a class="breadcrumb__item" href="#">item 2</a>
    </li>

    <li class="breadcrumb__list-item">
      <span class="breadcrumb__item breadcrumb__item--active">item 3</span>
    </li>
  </ul>
</nav>

The small device usage

You can with the variable $breadcrumbs--responsive-breakpoint setup the breakpoint where starts the “desktop” layout. Then you need to setup some javascript to work on small devices. You can do it into the html directly or with an import following es6 syntax :

Javascript usage into html

<!-- As close of the </body> tag as possible -->
<script src="./path/to/trowel-breadcrumbs/dest/javascript/breadcrumbs.js"></script>

<script type="text/javascript">
  var breadcrumbs = new TrowelBreadcrumbs(document.querySelectorAll('[data-flag="breadcrumb"]'));
</script>

Javascript usage with an import

import TrowelBreadcrumbs from './path/to/trowel-breadcrumbs/src/javascript/breadcrumbs';

const breadcrumbs = new TrowelBreadcrumbs(document.querySelectorAll('[data-flag="breadcrumb"]'));

Twig usage

Instead of writing html, you can include the twig template :

{% include "path/to/trowel-breadcrumbs/src/twig/breadcrumb.html.twig" with {
  "items": [{
    "href": "#",
    "label": "item 1",
  }, {
    "href": "#",
    "label": "item 2",
  }, {
    "label": "item 3",
    "active": true,
  }]
} %}

If you want to add some modifiers on the block selector (.breadcrumb), you can set the array modifiers with as many modifiers as you need :

{% include "path/to/trowel-breadcrumbs/src/twig/breadcrumb.html.twig" with {
  "modifiers": ['primary', 'lg'],
  "items": [{
    "href": "#",
    "label": "item 1",
  }, {
    "href": "#",
    "label": "item 2",
  }, {
    "label": "item 3",
    "active": true,
  }]
} %}

If you setted some syntax config, you will have to pass it to the include :

{% include "path/to/trowel-breadcrumbs/src/twig/breadcrumb.html.twig" with {
  "syntax": {
    "prefix": "c",
    "separator": {
      "prefix": "-",
      "element": "-",
      "modifier": "-",
    },
  },
  "items": [{
    "href": "#",
    "label": "item 1",
  }, {
    "href": "#",
    "label": "item 2",
  }, {
    "label": "item 3",
    "active": true,
  }]
} %}

For changing the back and toggle buttons label, replace the include statement by embed and overwrite the blocks toggle_label and back_label :

{% embed "path/to/trowel-breadcrumbs/src/twig/breadcrumb.html.twig" with {
  "items": [{
    "href": "#",
    "label": "item 1",
  }, {
    "href": "#",
    "label": "item 2",
  }, {
    "label": "item 3",
    "active": true,
  }]
} %}
  {% block toggle_label %}Previous{% endblock %}
  {% block back_label %}Go back{% endblock %}
{% endembed %}

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Component variables