Breadcrumbs github location npm version

Your meat-and-potatoes breadcrumbs. A max depth of no-more-than three items is recommended.

Usage

The "With Related" variant allows you to indicate related items.

Installation info

This component is distributed with npm. After installing npm, you can install the vf-breadcrumbs with this command.

$ yarn add --dev @visual-framework/vf-breadcrumbs

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-breadcrumbs/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Variants


Nunjucks syntax
{% render '@vf-breadcrumbs', {
  "component-type": "block",
  "breadcrumbs": [
    {
      "text": "Explore",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Topics",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Centre",
      "currentPage": true
    }
  ],
  "related": [
    {
      "text": "Biscuits",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Fruits For Cheese",
      "breadcrumb_href": "JavaScript:Void(0);"
    }
  ]
} %}
                
HTML
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">
  <ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
    <li class="vf-breadcrumbs__item">
      <a href="JavaScript:Void(0);" class="vf-breadcrumbs__link">Explore</a>
    </li>
    <li class="vf-breadcrumbs__item">
      <a href="JavaScript:Void(0);" class="vf-breadcrumbs__link">Topics</a>
    </li>
    <li class="vf-breadcrumbs__item" aria-current="location">
      Centre
    </li>
  </ul>
</nav>
              
Nunjucks syntax
{% render '@vf-breadcrumbs', {
  "component-type": "block",
  "breadcrumbs": [
    {
      "text": "Explore",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Topics",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Centre",
      "currentPage": true
    }
  ],
  "related": [
    {
      "text": "Biscuits",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Fruits For Cheese",
      "breadcrumb_href": "JavaScript:Void(0);"
    }
  ]
} %}
                
HTML
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">

  <ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
    <li class="vf-breadcrumbs__item">
      <a href="JavaScript:Void(0);" class="vf-breadcrumbs__link">Explore</a>


    </li>

    <li class="vf-breadcrumbs__item">
      <a href="JavaScript:Void(0);" class="vf-breadcrumbs__link">Topics</a>


    </li>

    <li class="vf-breadcrumbs__item" aria-current="location">
      Centre

    </li>


  </ul>

  <span class="vf-breadcrumbs__heading">Related:</span>
  <ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
    <li class="vf-breadcrumbs__item">
      <a href="JavaScript:Void(0);" class="vf-breadcrumbs__link">Biscuits</a>
    </li>
    <li class="vf-breadcrumbs__item">
      <a href="JavaScript:Void(0);" class="vf-breadcrumbs__link">Fruits For Cheese</a>
    </li>
  </ul>

</nav>
              

Assets



File system location: components/vf-breadcrumbs

Find an issue on this page? Propose a change or discuss it.