MentorKit Pattern Library

Breadcrumbs 

<nav class=" items-center md:flex py-3 text-lg bg-grey-50 border-t border-b border-grey-300">
    <ul class="container flex min-w-0">

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="../../index.html" class="hover:underline ">Home</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="../../index.html" class="hover:underline ">First Level</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="../../index.html" class="hover:underline ">Second Level</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="../../article-detail.html" class="hover:underline truncate" aria-current="page">Current Page</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

    </ul>
</nav>
 
<nav class=" items-center md:flex py-3 text-lg bg-grey-50 border-t border-b border-grey-300">
    <ul class="container flex min-w-0">
        {% for breadcrumb in breadcrumbs %}
            <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
                <a href="{{ breadcrumb.url | path }}" class="hover:underline {% if loop.index == breadcrumbs.length %}truncate{% endif %}" {% if loop.index == breadcrumbs.length %}aria-current="page"{% endif %}>{{ breadcrumb.text }}</a>
                <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                    {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-grey-800 transform -rotate-90', ariaHidden: true } %}
                </div>
            </li>
        {% endfor %}
    </ul>
</nav>
 
{
  "siteName": "MentorKit Pattern Library",
  "breadcrumbs": [
    {
      "text": "Home",
      "url": "/"
    },
    {
      "text": "First Level",
      "url": "/"
    },
    {
      "text": "Second Level",
      "url": "/"
    },
    {
      "text": "Current Page",
      "url": "/article-detail/"
    }
  ]
}

No notes defined.