OffHealth component library

Breadcrumb component: Reverse 

<nav class="n7-breadcrumb " aria-label="Breadcrumb">
    <ol class="flex flex-wrap">

        <li>
            <a class="inline-flex items-center p-1 text-xs text-white hover:underline" href="#">
                Home

                <svg class="inline-block align-middle fill-current w-4 h-4 text-white/50 ml-2" aria-hidden="true" focusable="false" role="img">
                    <use xlink:href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>

        <li>
            <a class="inline-flex items-center p-1 text-xs text-white hover:underline" href="#">
                Eventi

                <svg class="inline-block align-middle fill-current w-4 h-4 text-white/50 ml-2" aria-hidden="true" focusable="false" role="img">
                    <use xlink:href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>

        <li>
            <a class="inline-flex items-center p-1 text-xs text-white hover:underline" href="#">
                Seminari

                <svg class="inline-block align-middle fill-current w-4 h-4 text-white/50 ml-2" aria-hidden="true" focusable="false" role="img">
                    <use xlink:href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>

        <li>
            <a class="inline-flex items-center p-1 text-xs text-white font-bold hover:underline" href="#" aria-current="page">
                Lavoro e transizione energetica

            </a>
        </li>

    </ol>
</nav>
 
<nav class="n7-breadcrumb {{ classes }}" aria-label="Breadcrumb">
  <ol class="flex flex-wrap">
    {% for item in items %}
    <li>
        <a class="inline-flex items-center p-1 text-xs{% if reverseColor %} text-white{% else %} n7-content-03{% endif %}{% if loop.last %} font-bold{% endif %} hover:underline" href="#" {%- if loop.last -%} aria-current="page"{%- endif -%}>
          {% if loop.first %}
            {%- if hasIcon -%}
            {% render "@icon", {id:'home',size: 'w-4 h-4 md:w-5 md:h-5'}, true %}
              <span class="sr-only">
            {%- endif -%}
          {%- endif -%}
          {{ item.label }}
          {%- if loop.first -%}
            {%- if hasIcon -%}
              </span>
            {%- endif -%}
          {% endif %}
          {% if not loop.last %}
            {% if reverseColor %}
              {% render "@icon", {id:'mini--chevron-right',size: 'w-4 h-4', classes: 'text-white/50 ml-2'}, true %}
            {% else %}
              {% render "@icon", {id:'mini--chevron-right',size: 'w-4 h-4', classes: 'text-neutral-400 ml-2'}, true %}
            {% endif %}
          {% endif %}
        </a>
    </li>
    {% endfor %}
  </ol>
</nav>
 
{
  "items": [
    {
      "label": "Home"
    },
    {
      "label": "Eventi"
    },
    {
      "label": "Seminari"
    },
    {
      "label": "Lavoro e transizione energetica"
    }
  ],
  "reverseColor": true
}

No notes defined.