Breadcrumbs Component

npm version

About

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

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

Install

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

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.

File system location: components/vf-breadcrumbs

Variants

Variant: Default live block

Nunjucks demo

{% render '@vf-breadcrumbs--default', {
  "component-type": "block",
  "breadcrumbs": [
    {
      "text": "Explore",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Topics",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Centre"
    }
  ],
  "related": [
    {
      "text": "Biscuits",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Fruits For Cheese",
      "breadcrumb_href": "JavaScript:Void(0);"
    }
  ]
} %}

Sample output

Sample output as 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">
      Centre
    </li>
  </ul>
</nav>

Assets

Variant: With Related live block

Nunjucks demo

{% render '@vf-breadcrumbs--with-related', {
  "component-type": "block",
  "breadcrumbs": [
    {
      "text": "Explore",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Topics",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Centre"
    }
  ],
  "related": [
    {
      "text": "Biscuits",
      "breadcrumb_href": "JavaScript:Void(0);"
    },
    {
      "text": "Fruits For Cheese",
      "breadcrumb_href": "JavaScript:Void(0);"
    }
  ]
} %}

Sample output

Sample output as 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="" class="vf-breadcrumbs__link">Explore</a>
    </li>
    <li class="vf-breadcrumbs__item">
      <a href="" class="vf-breadcrumbs__link">Topics</a>
    </li>
    <li class="vf-breadcrumbs__item">
      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

All components in this design system

This page is part of the components section.