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

  <div class="breadcrumbs-demo">
    <div class="breadcrumbs-demo-row">
      <nav aria-label="Breadcrumb">
        <ol class="breadcrumb">
          <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">
          <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">
          <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">
          <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">
          <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">
          <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">
          <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">
          <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>

  <h3>Vue breadcrumbs</h3>
  <div id="vue-breadcrumbs-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnBreadcrumbs, GnBreadcrumbItem } from "/vue/index.js";

    createApp({
      components: { GnBreadcrumbs, GnBreadcrumbItem },
      template: `
        <gn-breadcrumbs inverted>
          <gn-breadcrumb-item href="#">Home</gn-breadcrumb-item>
          <gn-breadcrumb-item href="#">Settings</gn-breadcrumb-item>
          <gn-breadcrumb-item active>Account</gn-breadcrumb-item>
        </gn-breadcrumbs>
      `
    }).mount("#vue-breadcrumbs-app");
  </script>
</section>