.bs-breadcrumb .dropdown-item:active {
background-color: var(--primary-color);
}
.bs-breadcrumb {
background: var(--breadcrumb-bg-color);
border-radius: 0.25rem;
width: 100%;
}
.breadcrumb {
display: flex;
align-items: center;
min-height: 32px;
margin-bottom: 0;
padding: 0.5rem 1rem;
font-size: 0.875rem;
background: var(--breadcrumb-bg-color);
}
.breadcrumb-item {
line-height: 2;
}
.breadcrumb-item a {
display: flex;
align-items: center;
text-decoration: none;
color: #696969;
cursor:pointer;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item::before {
content: '>';
color: #6c757d;
padding: 0 5px;
}
.breadcrumb-item.active {
color: rgb(69 69 69);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-width: 30%;
padding-bottom: 1px;
}
.icon {
width: 16px;
height: 16px;
margin-right: 5px;
fill: currentColor;
}
/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
.breadcrumb {
min-height: 28px;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
margin-left: 0;
justify-content: flex-start;
}
.breadcrumb-item.active {
max-width: 50%;
}
.breadcrumb-item + .breadcrumb-item::before {
padding: 0 3px;
}
.icon {
width: 12px;
height: 12px;
margin-right: 3px;
}
/* Agrega scroll al dropdown en mobile */
.breadcrumb-item .dropdown-menu {
max-height: 200px;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Para mejor scroll en iOS */
}
/* Estilizar scrollbar para móviles que lo soporten */
.breadcrumb-item .dropdown-menu::-webkit-scrollbar {
width: 4px;
}
.breadcrumb-item .dropdown-menu::-webkit-scrollbar-track {
background: #f1f1f1;
}
.breadcrumb-item .dropdown-menu::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
}<div class="bs-breadcrumb mb-2" aria-label="breadcrumb">
<nav class="container">
<ol class="breadcrumb d-flex flex-wrap align-items-center">
<li class="breadcrumb-item">
<a href="/" title="{{ site.name | capitalize }}">
<!-- Ícono de casa/inicio -->
<svg class="icon" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
<path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>
</svg> Inicio
</a>
</li>
{% if current_url contains "/product/" %}
{% if product.collections.size > 1 %}
<li class="breadcrumb-item dropdown">
<a class="breadcrumb-item dropdown-toggle" id="breadcrumb-collection" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- Ícono de colección -->
<svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"/>
</svg> Colecciones
</a>
<div class="dropdown-menu" aria-labelledby="breadcrumb-collection">
{% for e in product.collections %}
<a class="dropdown-item" href="{{ e.url }}">
<!-- Ícono de item de colección -->
<svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192z"/>
</svg> {{ e.name | capitalize }}
</a>
{% endfor %}
</div>
</li>
{% else %}
<li class="breadcrumb-item">
<a href="{{ product.collections[0].url }}">
<!-- Ícono de colección única -->
<svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192z"/>
</svg> {{ product.collections[0].name | capitalize }}
</a>
</li>
{% endif %}
<li class="breadcrumb-item active" aria-current="page">{{ title | capitalize }}</li>
{% elsif current_url contains "/article/" %}
<li class="breadcrumb-item">
<a href="/blog" title="Blog">
<!-- Ícono de blog -->
<svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M192 32c0 17.7 14.3 32 32 32c123.7 0 224 100.3 224 224c0 17.7 14.3 32 32 32s32-14.3 32-32C512 128.9 383.1 0 224 0c-17.7 0-32 14.3-32 32zm0 96c0 17.7 14.3 32 32 32c70.7 0 128 57.3 128 128c0 17.7 14.3 32 32 32s32-14.3 32-32c0-106-86-192-192-192c-17.7 0-32 14.3-32 32zM96 144c0-26.5-21.5-48-48-48S0 117.5 0 144V368c0 79.5 64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144H128v96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48s-48-21.5-48-48V144z"/>
</svg> Artículo
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ title | capitalize }}</li>
{% elsif current_url contains "/policies/" %}
<li class="breadcrumb-item">
<a href="/policies" title="Políticas">
<!-- Ícono de políticas -->
<svg class="icon" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg">
<path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"/>
</svg> Políticas
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ title | capitalize }}</li>
{% elsif current_url contains "?search_text=" %}
<li class="breadcrumb-item">
<a href="{{ current_url }}" title="Buscador">
<!-- Ícono de búsqueda -->
<svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
</svg> Buscador
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ title | capitalize }}</li>
{% elsif current_url contains "/cart/" %}
<li class="breadcrumb-item active" aria-current="page">
<!-- Ícono de carrito -->
<svg class="icon" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
<path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
</svg> Carro
</li>
{% else %}
<li class="breadcrumb-item active" aria-current="page">{{ title | capitalize }}</li>
{% endif %}
</ol>
</nav>
</div>