src/scss/bootstrap-4.0.0-alpha.6/docs/components/breadcrumb.md

   1 ---
   2 layout: docs
   3 title: Breadcrumb
   4 description: Indicate the current page's location within a navigational hierarchy.
   5 group: components
   6 ---
   7
   8 Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
   9
  10 {% example html %}
  11 <ol class="breadcrumb">
  12   <li class="breadcrumb-item active">Home</li>
  13 </ol>
  14 <ol class="breadcrumb">
  15   <li class="breadcrumb-item"><a href="#">Home</a></li>
  16   <li class="breadcrumb-item active">Library</li>
  17 </ol>
  18 <ol class="breadcrumb">
  19   <li class="breadcrumb-item"><a href="#">Home</a></li>
  20   <li class="breadcrumb-item"><a href="#">Library</a></li>
  21   <li class="breadcrumb-item active">Data</li>
  22 </ol>
  23 {% endexample %}
  24
  25 Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
  26
  27 {% example html %}
  28 <nav class="breadcrumb">
  29   <a class="breadcrumb-item" href="#">Home</a>
  30   <a class="breadcrumb-item" href="#">Library</a>
  31   <a class="breadcrumb-item" href="#">Data</a>
  32   <span class="breadcrumb-item active">Bootstrap</span>
  33 </nav>
  34 {% endexample %}