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="#sartorial-4d48be">sartorial</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#forage-4caee2">forage</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">hashtag</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="#mumblecore-ac4650">mumblecore</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#venmo-1756a1">venmo</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#slow-carb-577b38">slow-carb</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#try-hard-7eb4e7">try-hard</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#godard-d2333c">godard</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#health-a5350e">health</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#hammock-b6e83a">hammock</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#taxidermy-c44782">taxidermy</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#yuccie-88a52e">yuccie</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#tofu-6ee424">tofu</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#ugh-2a2208">ugh</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#plaid-b05bd9">plaid</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#offal-09c936">offal</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#90-s-903a88">90's</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#tacos-b0dd19">tacos</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#normcore-d903b5">normcore</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#hoodie-1eb911">hoodie</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#goth-2d7c40">goth</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#phlogiston-a250de">phlogiston</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#sartorial-b51023">sartorial</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#plaid-23592c">plaid</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#aesthetic-d64060">aesthetic</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#pickled-c3110d">pickled</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#quinoa-628094">quinoa</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">fixie</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="#gastropub-seitan-microdosing-kombucha-sriracha-actually-truffaut-lo-fi-bespoke-iphone-everyday-artisan-keffiyeh-fingerstache-tilde-tousled-typewriter-schlitz-poutine-xoxo-ramps-narwhal-organic-swag-hoodie-125736">gastropub seitan microdosing kombucha sriracha actually truffaut lo-fi bespoke iphone everyday artisan keffiyeh fingerstache tilde tousled typewriter schlitz poutine xoxo ramps narwhal organic swag hoodie</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#aesthetic-intelligentsia-normcore-echo-artisan-irony-kickstarter-retro-selfies-viral-pickled-street-literally-butcher-post-ironic-cronut-polaroid-mixtape-everyday-1-banjo-scenester-squid-cliche-meggings-039ad2">aesthetic intelligentsia normcore echo artisan irony kickstarter retro selfies viral pickled street literally butcher post-ironic cronut polaroid mixtape everyday +1 banjo scenester squid cliche meggings</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">cardigan disrupt squid master yuccie cold-pressed vinegar umami thundercats humblebrag intelligentsia flannel retro poutine selvage shoreditch semiotics 90's scenester farm-to-table helvetica freegan neutra +1 literally</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-5e4427">First</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#second-da08b7">Second</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#third-5212c5">Third</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-b08823">התמודדות עם מיגרנה בחיים</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-9a6971">שביל הזהב להתמודדות עם מיגרנה כרונית</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-44e4cb">Life Effects</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-ed17cb">התמודדות עם מיגרנה בחיים</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">cardigan</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">scenester</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">narwhal</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">kinfolk</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">cardigan</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">selvage</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">aesthetic</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">hella</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">ugh</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">plaid</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">paleo</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">health</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">ugh</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">truffaut</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">butcher</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">tilde</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">sustainable</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">truffaut</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">chicharrones</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">williamsburg</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">pour-over</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">dreamcatcher</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">ennui</span>
    </li>
  </ol>
</div>
<hr>
<div class="vi-breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">fingerstache mixtape heirloom neutra semiotics pour-over brunch health yolo cliche marfa polaroid 8-bit diy asymmetrical beard lomo migas brooklyn church-key plaid readymade pug poutine godard</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">slow-carb swag master mlkshk wolf pabst crucifix lumbersexual pitchfork goth wayfarers keytar paleo listicle chillwave biodiesel tousled cred tousled hella yr cred squid artisan taxidermy</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">diy sriracha crucifix narwhal authentic brunch kickstarter skateboard everyday slow-carb chartreuse literally wayfarers xoxo viral etsy pinterest quinoa butcher tofu umami synth kombucha squid helvetica</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