---
layout: cypress
title: Components/Breadcrumb
---

{% capture content %}
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
{% endcapture %}

<nav id="breadcrumb" class="breadcrumb">
  <ul>
    {{ content }}
  </ul>
</nav>

<nav id="breadcrumb-centered" class="breadcrumb is-centered">
  <ul>
    {{ content }}
  </ul>
</nav>

<nav id="breadcrumb-right" class="breadcrumb is-right">
  <ul>
    {{ content }}
  </ul>
</nav>

{% for size in site.data.sizes %}
  <nav id="breadcrumb-{{ size }}" class="breadcrumb is-{{ size }}">
    <ul>
      {{ content }}
    </ul>
  </nav>
{% endfor %}

<nav id="breadcrumb-arrow" class="breadcrumb has-arrow-separator">
  <ul>
    {{ content }}
  </ul>
</nav>

<nav id="breadcrumb-bullet" class="breadcrumb has-bullet-separator">
  <ul>
    {{ content }}
  </ul>
</nav>

<nav id="breadcrumb-dot" class="breadcrumb has-dot-separator">
  <ul>
    {{ content }}
  </ul>
</nav>

<nav id="breadcrumb-succeeds" class="breadcrumb has-succeeds-separator">
  <ul>
    {{ content }}
  </ul>
</nav>