Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Product
Primitives & components: Teva Product

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="#sriracha-118942">sriracha</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#pour-over-d08d84">pour-over</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">phlogiston</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="#umami-adb57d">umami</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#echo-c134b6">echo</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#offal-9261a4">offal</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#tilde-841a39">tilde</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#chartreuse-dca744">chartreuse</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#bitters-1a8053">bitters</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#beard-343ece">beard</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#aesthetic-7e001e">aesthetic</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#carry-dd4a8b">carry</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#truffaut-ed71d2">truffaut</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#tousled-289988">tousled</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#humblebrag-3a711e">humblebrag</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#leggings-512b90">leggings</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#selfies-304ee3">selfies</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#brooklyn-1ee873">brooklyn</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#stumptown-0d7b43">stumptown</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#narwhal-c1075d">narwhal</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#intelligentsia-cac302">intelligentsia</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#drinking-c89394">drinking</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#diy-640a18">diy</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#actually-5668a6">actually</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#swag-9c813e">swag</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#hella-5d1c33">hella</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#brunch-deb946">brunch</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">xoxo</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="#xoxo-vice-asymmetrical-chia-chia-selvage-tousled-narwhal-ethical-everyday-90-s-ramps-keytar-franzen-meh-hammock-diy-salvia-tumblr-irony-tattooed-chartreuse-kinfolk-kitsch-heirloom-411920">xoxo vice asymmetrical chia chia selvage tousled narwhal ethical everyday 90's ramps keytar franzen meh hammock diy salvia tumblr irony tattooed chartreuse kinfolk kitsch heirloom</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#humblebrag-goth-kinfolk-migas-godard-marfa-quinoa-tousled-cred-fixie-sustainable-skateboard-meh-meditation-scenester-brooklyn-gastropub-tacos-actually-narwhal-yuccie-pbr-b-wolf-bespoke-selfies-5ec330">humblebrag goth kinfolk migas godard marfa quinoa tousled cred fixie sustainable skateboard meh meditation scenester brooklyn gastropub tacos actually narwhal yuccie pbr&amp;b wolf bespoke selfies</a>
    </li>
    <li class="vi-breadcrumb__item">
      <span aria-label="your location in the website" class="vi-breadcrumb__segment">tofu hammock celiac kombucha thundercats pour-over quinoa brooklyn chicharrones hella ramps mixtape vinegar 8-bit cray chartreuse synth tilde listicle pop-up keffiyeh pug wolf sriracha 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-9b0a1b">First</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#second-bc23be">Second</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#third-56122a">Third</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-53d266">התמודדות עם מיגרנה בחיים</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-0d2821">שביל הזהב להתמודדות עם מיגרנה כרונית</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-589e46">Life Effects</a>
    </li>
    <li class="vi-breadcrumb__item">
      <a class="vi-breadcrumb__link" href="#-5dc4db">התמודדות עם מיגרנה בחיים</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.

  1. sustainable
  2. scenester
  3. try-hard
  1. Life Effects
  2. התמודדות עם מיגרנה בחיים
  3. שביל הזהב להתמודדות עם מיגרנה כרונית
  1. shoreditch
  2. crucifix
  3. tilde
  4. distillery
  5. park
  6. locavore
  7. wayfarers
  8. vinegar
  9. farm-to-table
  10. sustainable
  11. tattooed
  12. ramps
  13. yuccie
  14. organic
  15. cliche
  16. asymmetrical
  17. gentrify
  18. cardigan
  19. cray
  20. paleo
  21. taxidermy
  22. blog
  23. waistcoat
  24. letterpress
  25. yuccie
  1. letterpress asymmetrical squid narwhal vhs whatever knausgaard seitan bitters meh migas humblebrag pickled paleo selvage cleanse pop-up cliche cliche roof brooklyn ugh yr brunch beard
  2. tousled godard narwhal keffiyeh retro marfa biodiesel tacos cray chicharrones master mlkshk pinterest schlitz slow-carb listicle cardigan seitan selvage shoreditch lo-fi authentic cornhole chillwave brunch
  3. tousled quinoa synth sustainable squid yr whatever gluten-free kogi disrupt organic vegan bitters park keffiyeh vinyl iphone sartorial biodiesel crucifix health diy street ramps aesthetic 
<div class="vi-breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">sustainable</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">try-hard</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">shoreditch</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">crucifix</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">distillery</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">locavore</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">wayfarers</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">vinegar</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">farm-to-table</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">tattooed</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">ramps</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">yuccie</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">organic</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">cliche</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">asymmetrical</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">gentrify</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">cray</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">taxidermy</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">blog</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">waistcoat</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">letterpress</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">yuccie</span>
    </li>
  </ol>
</div>
<hr>
<div class="vi-breadcrumb">
  <ol class="vi-breadcrumb__list">
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">letterpress asymmetrical squid narwhal vhs whatever knausgaard seitan bitters meh migas humblebrag pickled paleo selvage cleanse pop-up cliche cliche roof brooklyn ugh yr brunch beard</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">tousled godard narwhal keffiyeh retro marfa biodiesel tacos cray chicharrones master mlkshk pinterest schlitz slow-carb listicle cardigan seitan selvage shoreditch lo-fi authentic cornhole chillwave brunch</span>
    </li>
    <li class="vi-breadcrumb__item">
      <span class="vi-breadcrumb__segment">tousled quinoa synth sustainable squid yr whatever gluten-free kogi disrupt organic vegan bitters park keffiyeh vinyl iphone sartorial biodiesel crucifix health diy street ramps aesthetic</span>
    </li>
  </ol>
</div>

Stylesheets #

The following stylesheet is required to display this component.

Usage documentation #

Usage documentation can be found here.

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