Breadcrumbs
The breadcrumb component shows the current page of the user relative to other i.e. pages. It helps users to track their path while navigating back and forth and creates an understanding of the product's hierarchy from highest to lowest.
Normal breadcrumb
<nav aria-label="Breadcrumb">
<ol class="flix-breadcrumbs">
<li class="flix-breadcrumbs__item">
<a class="flix-breadcrumbs__link" href="#">Home</a>
</li>
<li class="flix-breadcrumbs__item">
<a class="flix-breadcrumbs__link" href="#">Germany</a>
</li>
<li class="flix-breadcrumbs__item">
<a class="flix-breadcrumbs__link" href="#">Bavaria</a>
</li>
<li class="flix-breadcrumbs__item">
<span class="flix-breadcrumbs__link" aria-current="page">Munich</span>
</li>
</ol>
</nav>With ellipsis
If more than 7 items are to be displayed on your breadcrumbs you can use the ellipsis to collapse intermediate items, make sure to always render the first and last item and insert the flix-breadcrumbs__ellipsis element in between. E.g:
<nav aria-label="Breadcrumb">
<ol class="flix-breadcrumbs">
<li class="flix-breadcrumbs__item">
<a class="flix-breadcrumbs__link" href="#">Universe</a>
</li>
<li class="flix-breadcrumbs__item">
<a class="flix-breadcrumbs__link" href="#">Milky way</a>
</li>
<li class="flix-breadcrumbs__item" aria-hidden="true">
<span class="flix-breadcrumbs__ellipsis"></span>
</li>
<li class="flix-breadcrumbs__item">
<a class="flix-breadcrumbs__link" href="#">Germany</a>
</li>
<li class="flix-breadcrumbs__item">
<span class="flix-breadcrumbs__link" aria-current="page">Berlin</span>
</li>
</ol>
</nav>