Fork: 0
root / vmk-ui-kit
Transfer to URL with SHA Find file
Newer
Older
vmk-ui-kit / demo / partials / breadcrumbs.html
@Eugene Sukhodolskiy Eugene Sukhodolskiy 1 day ago 3 KB Polish triggers, breadcrumbs, drawer, file preview, editable icons, logos
Raw Blame History 
<section class="demo-section">
  <h2>Breadcrumbs</h2>

  <div class="breadcrumbs-demo">
    <div class="breadcrumbs-demo-row">
      <nav aria-label="Breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
      <nav aria-label="Collapsed breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
    </div>

    <div class="breadcrumbs-demo-row">
      <nav aria-label="Breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
      <nav aria-label="Collapsed breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
    </div>

    <div class="breadcrumbs-demo-row">
      <nav aria-label="Breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
      <nav aria-label="Collapsed breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
    </div>

    <div class="breadcrumbs-demo-row">
      <nav aria-label="Breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item"><a href="#">Label</a></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
      <nav aria-label="Collapsed breadcrumb">
        <ol class="breadcrumb breadcrumb-inverted">
          <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
          <li class="breadcrumb-separator" aria-hidden="true">/</li>
          <li class="breadcrumb-item is-active"><span>Label</span></li>
        </ol>
      </nav>
    </div>
  </div>
</section>