Breadcrumb

v0.0.1-alpha.0

The Breadcrumb allows users to keep track and maintain awareness of their location within the website.

Wrap the label in a tag with class .vi-breadcrumb__link. Wrap last item (current page) in span tag with class .vi-breadcrumb__segment.

<nav class="vi-breadcrumb" aria-label="Breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#normcore-b0494e">normcore</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#locavore-8a7168">locavore</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">neutra</span>
    </li>
  </ol>
</nav>
<hr>
<nav class="vi-breadcrumb" aria-label="Breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#celiac-2b14de">celiac</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#crucifix-2d4c6b">crucifix</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#quinoa-ea5b06">quinoa</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#yuccie-70633d">yuccie</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#celiac-453207">celiac</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#xoxo-03eb69">xoxo</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#pop-up-8560a0">pop-up</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#bitters-6847ca">bitters</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#flannel-0cbba5">flannel</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#iphone-50442e">iphone</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#cliche-05772b">cliche</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#sriracha-656ba4">sriracha</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#tattooed-a991d1">tattooed</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#flannel-7d89dd">flannel</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#chartreuse-1210a0">chartreuse</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#typewriter-ebb115">typewriter</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#gentrify-b220ce">gentrify</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#xoxo-1c135e">xoxo</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#truffaut-47e5cd">truffaut</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#pinterest-76c4e7">pinterest</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#gentrify-bbe4a9">gentrify</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#tumblr-bb111a">tumblr</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#leggings-1d66a2">leggings</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#sartorial-3b2035">sartorial</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">retro</span>
    </li>
  </ol>
</nav>
<hr>
<nav class="vi-breadcrumb" aria-label="Breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#offal-retro-cardigan-hella-pinterest-chambray-taxidermy-roof-tattooed-asymmetrical-church-key-readymade-selfies-brooklyn-hoodie-pour-over-celiac-viral-cliche-kitsch-meggings-biodiesel-truffaut-intelligentsia-organic-60b591">offal retro cardigan hella pinterest chambray taxidermy roof tattooed asymmetrical church-key readymade selfies brooklyn hoodie pour-over celiac viral cliche kitsch meggings biodiesel truffaut intelligentsia organic</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#shoreditch-blog-heirloom-cred-bespoke-mumblecore-whatever-phlogiston-wayfarers-stumptown-brooklyn-locavore-ugh-8-bit-schlitz-thundercats-gastropub-godard-williamsburg-brooklyn-vinegar-sustainable-cleanse-helvetica-meggings-bdb04c">shoreditch blog heirloom cred bespoke mumblecore whatever phlogiston wayfarers stumptown brooklyn locavore ugh 8-bit schlitz thundercats gastropub godard williamsburg brooklyn vinegar sustainable cleanse helvetica meggings</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">meh cray pbr&amp;b pabst park gastropub migas kogi banjo marfa lumbersexual tousled chambray whatever readymade forage microdosing humblebrag dreamcatcher portland 90's actually viral austin street</span>
    </li>
  </ol>
</nav>
<hr>
<nav class="vi-breadcrumb" aria-label="Breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#first-8ea638">First</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#second-155208">Second</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#third-0c673b">Third</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-388415">התמודדות עם מיגרנה בחיים</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-1275b8">שביל הזהב להתמודדות עם מיגרנה כרונית</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">Sixth</span>
    </li>
  </ol>
</nav>
<hr>
<nav class="vi-breadcrumb" aria-label="Breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#life-effects-0936e4">Life Effects</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-034885">התמודדות עם מיגרנה בחיים</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">שביל הזהב להתמודדות עם מיגרנה כרונית</span>
    </li>
  </ol>
</nav>

Segments #

Use Segments when the Breadcrumb is used only to display location within the website, without links.

Wrap the label in span tag with class .vi-breadcrumb__segment.

<div class="vi-breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">offal</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">meggings</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">austin</span>
    </li>
  </ol>
</div>
<hr>
<div class="vi-breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">Life Effects</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">התמודדות עם מיגרנה בחיים</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">שביל הזהב להתמודדות עם מיגרנה כרונית</span>
    </li>
  </ol>
</div>
<hr>
<div class="vi-breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">park</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">venmo</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">sartorial</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">kinfolk</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">street</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">helvetica</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">yolo</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">yr</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">synth</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">park</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">etsy</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">swag</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">migas</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">phlogiston</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">typewriter</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">skateboard</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">viral</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">diy</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">bushwick</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">try-hard</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">shoreditch</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">lo-fi</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">distillery</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">cleanse</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">ramps</span>
    </li>
  </ol>
</div>
<hr>
<div class="vi-breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">meditation artisan venmo pour-over pickled etsy selvage actually microdosing pbr&amp;b ethical carry cornhole kombucha selfies brooklyn locavore mustache seitan fingerstache health normcore asymmetrical yolo blog</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">offal hella yuccie diy pickled keytar phlogiston humblebrag master mlkshk squid organic vinyl butcher diy pop-up tumblr mixtape chartreuse crucifix quinoa brunch skateboard blog cred</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">helvetica stumptown portland taxidermy microdosing normcore distillery phlogiston chicharrones yr 8-bit mustache authentic ethical vhs chartreuse forage meggings everyday 90's chambray aesthetic lo-fi phlogiston schlitz</span>
    </li>
  </ol>
</div>

Stylesheets #

The following stylesheet is required to display this component.

Download Breadcrumb Stylesheet

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  RTL support IE11 as good as browser allows


Changed

  Print: css adjustments
  Accessibility: Changed outermost element to <nav>
  Accessibility: Changed aria-current="page" to aria-label="your location in the website"
  Changed to inline version so long titles will wrap in favour of keeping arrow/chevron after title at all times


Added

  PBS support
  RTL support
  Initial draft