Breadcrumbs

Breadcrumbs

The breadcrumbs component is used for navigation and to reinforce for the user where they are within the site structure, especially for deeper site pages. Always add a slash after the text, to indicate the parent category.

Similar type styling and positioning is also used as a non-link running subhead. The case studies section serves as an example, where an icon is added for visual interest. Since these instances are visually similar to breadcrumbs – but don’t behave like breadcrumbs – we haven’t included an example here.

<!-- <div class=""></div> -->

<div class="preview">

    <!-- breadcrumb -->
    <div>
        <a class="breadcrumb" href="/#/">Breadcrumb link</a>/
        <h1>How it works section uses this style</h1>
    </div>

</div>
<!-- <div class="{{ className }}">{{ text }}</div> -->

<div class="preview">

  <!-- breadcrumb -->
  <div>
    <a class="breadcrumb" href="{{ site.baseurl }}/#/">Breadcrumb link</a>/
    <h1>How it works section uses this style</h1>
  </div>

</div>
/* No context defined for this component. */