vmk-ui-kit/demo/partials/breadcrumbs.html at 33ea385f9cdc36d8230c1fc2ffa846b0290333c2

Fork: 0

root / vmk-ui-kit

Find file

Newer

Older

vmk-ui-kit / demo / partials / breadcrumbs.html

Eugene Sukhodolskiy 1 day ago 1 KB Add Divider, Accordion, Stepper and FileAttachment components

Raw Blame History

<section class="demo-section">
  <h2>Breadcrumbs</h2>

  <h3>Default</h3>
  <nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-separator" aria-hidden="true">/</li>
      <li class="breadcrumb-item"><a href="#">Products</a></li>
      <li class="breadcrumb-separator" aria-hidden="true">/</li>
      <li class="breadcrumb-item is-active"><span>Label</span></li>
    </ol>
  </nav>

  <h3>Collapsed</h3>
  <nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-separator" aria-hidden="true">/</li>
      <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
      <li class="breadcrumb-separator" aria-hidden="true">/</li>
      <li class="breadcrumb-item"><a href="#">Category</a></li>
      <li class="breadcrumb-separator" aria-hidden="true">/</li>
      <li class="breadcrumb-item is-active"><span>Label</span></li>
    </ol>
  </nav>

  <h3>Inverted (dark surface)</h3>
  <div style="padding: 24px; border-radius: 16px; background: #000000;">
    <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>
  </div>
</section>