Alain Afflelou Design System

Breadcrumbs 

<div class="flex items-center gap-1 flex-wrap ">
    <a href="#" class=" text-sm link-neutral no-underline">
        Accueil
    </a>
    <span class="text-neutral-500"><svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8171 3.82036C16.1925 3.99552 16.3548 4.44181 16.1796 4.81716L9.17957 19.8172C9.00441 20.1925 8.55813 20.3548 8.18277 20.1796C7.80742 20.0045 7.64513 19.5582 7.8203 19.1828L14.8203 4.18283C14.9955 3.80748 15.4418 3.64519 15.8171 3.82036Z" fill="currentColor" />
        </svg>
    </span>
    <a href="#" class=" text-sm link-neutral no-underline">
        Category
    </a>
    <span class="text-neutral-500"><svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8171 3.82036C16.1925 3.99552 16.3548 4.44181 16.1796 4.81716L9.17957 19.8172C9.00441 20.1925 8.55813 20.3548 8.18277 20.1796C7.80742 20.0045 7.64513 19.5582 7.8203 19.1828L14.8203 4.18283C14.9955 3.80748 15.4418 3.64519 15.8171 3.82036Z" fill="currentColor" />
        </svg>
    </span>
    <span class="text-xs font-semibold text-neutral-800">Subcategory</span>
</div>
 
<div class="flex items-center gap-1 flex-wrap {{ container_classes|default('') }}">
    {% render "@template-link" with {
        size:'sm',
        label:home_label is defined ? home_label : 'Accueil',
        href:home_href is defined ? home_href : '#',
        noUnderline:true,color:'neutral'
    }
    %}
    <span class="text-neutral-500">{% render "@icons-library--slash" with {size:16} %}</span>
    {% for link in links %}
        {% if loop.last %}
            <span class="text-xs font-semibold text-neutral-800">{{ link.label }}</span>
        {% else %}
            {% render "@template-link" with link|merge({size:'sm',noUnderline:true,color:'neutral'}) %}
            <span class="text-neutral-500">{% render "@icons-library--slash" with {size:16} %}</span>
        {% endif %}
    {% endfor %}
</div>
 
{
  "links": [
    {
      "label": "Category",
      "href": "#"
    },
    {
      "label": "Subcategory",
      "href": "#"
    }
  ]
}

Breadcrumbs guide

How to use

Import

{% render "@breadcrumbs" with {...} %}

Available props

  • home_label: string | default: Accueil
  • home_href: string | default: #
  • links: array | default: []
    • See link documentation