Breadcrumb

Informação importante

Nos modelos de breadcrumb a seguir pode-se notar que temos dois códigos html em cada um. Caso você opte por implementar o breadcrumb de forma estática, deve usar o código que está em "Html Estático" e fazer o redirecionamento dos links manualmente no código. Caso queira usar o breadcrumb de forma dinâmica deve usar os códigos que estão em "Html Dinâmico" em seus respectivos elementos na IDE da increazy.

Breadcrumb vertical

Preview

HTML Estático

<ul class="breadcrumb">
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Default</a>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--dark-gray" href="#">Default</a>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--dark" href="#">Default</a>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="/">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
               d="M15.8333 17.5002H4.16667C3.94565 17.5002 3.73369 17.4124 3.57741 17.2561C3.42113 17.0999 3.33333 16.8879 3.33333 16.6669V9.16688H0.833333L9.43917 1.34355C9.59259 1.20395 9.79257 1.12659 10 1.12659C10.2074 1.12659 10.4074 1.20395 10.5608 1.34355L19.1667 9.16688H16.6667V16.6669C16.6667 16.8879 16.5789 17.0999 16.4226 17.2561C16.2663 17.4124 16.0543 17.5002 15.8333 17.5002ZM10.8333 15.8336H15V7.63105L10 3.08605L5 7.63105V15.8336H9.16667V10.8336H10.8333V15.8336Z"
               fill="currentColor" />
         </svg>
      </a>
   </li>
</ul>

HTML Dinâmico

<!-- Use o código a seguir para o breadcrumb da página de categorias -->
<ul class="breadcrumb">
   {% for path in category.breadcrumb %}
    <li class="breadcrumb__item">
      <a {{ _href(path.path) }} class="breadcrumb__link {{ loop.last ? 'breadcrumb__link--dark' : '' }}">
          {{ path.name }}
      </a>
    </li>
  {% endfor %}

  <li class="breadcrumb__item">
      <a class="breadcrumb__link" {{ _href('/') }}>
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
               d="M15.8333 17.5002H4.16667C3.94565 17.5002 3.73369 17.4124 3.57741 17.2561C3.42113 17.0999 3.33333 16.8879 3.33333 16.6669V9.16688H0.833333L9.43917 1.34355C9.59259 1.20395 9.79257 1.12659 10 1.12659C10.2074 1.12659 10.4074 1.20395 10.5608 1.34355L19.1667 9.16688H16.6667V16.6669C16.6667 16.8879 16.5789 17.0999 16.4226 17.2561C16.2663 17.4124 16.0543 17.5002 15.8333 17.5002ZM10.8333 15.8336H15V7.63105L10 3.08605L5 7.63105V15.8336H9.16667V10.8336H10.8333V15.8336Z"
               fill="currentColor" />
         </svg>
      </a>
   </li>
</ul>


<!-- Use o código a seguir para o breadcrumb da página de produtos -->

<ul class="breadcrumb">
   {% for path in product.breadcrumb %}
    <li class="breadcrumb__item">
      <a {{ _href(path.path) }} class="breadcrumb__link {{ loop.last ? 'breadcrumb__link--dark' : '' }}">
          {{ path.name }}
      </a>
    </li>
  {% endfor %}

  <li class="breadcrumb__item">
      <a class="breadcrumb__link" {{ _href('/') }}>
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
               d="M15.8333 17.5002H4.16667C3.94565 17.5002 3.73369 17.4124 3.57741 17.2561C3.42113 17.0999 3.33333 16.8879 3.33333 16.6669V9.16688H0.833333L9.43917 1.34355C9.59259 1.20395 9.79257 1.12659 10 1.12659C10.2074 1.12659 10.4074 1.20395 10.5608 1.34355L19.1667 9.16688H16.6667V16.6669C16.6667 16.8879 16.5789 17.0999 16.4226 17.2561C16.2663 17.4124 16.0543 17.5002 15.8333 17.5002ZM10.8333 15.8336H15V7.63105L10 3.08605L5 7.63105V15.8336H9.16667V10.8336H10.8333V15.8336Z"
               fill="currentColor" />
         </svg>
      </a>
   </li>
</ul>

CSS

.breadcrumb {
    display: flex;
    align-items: center;
    flex-flow: column;
    row-gap: 20px;
    width: 100%;
    height: auto;
}

.breadcrumb__item .breadcrumb__link {
    color: #8E8E8E;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    cursor: pointer;
}

.breadcrumb__link--dark-gray {
    color: #5C5C5C!important;
}

.breadcrumb__link--dark {
    color: #000000!important;
}

.breadcrumb__item svg {
    color: #A7A7A7;
    width: 20px;
    height: 20px;
}

Breadcrumb com setas

Preview

HTML Estático

<ul class="breadcrumb">
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Página Inicial</a>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path d="M12.172 12.0001L9.343 9.17208L10.757 7.75708L15 12.0001L10.757 16.2431L9.343 14.8281L12.172 12.0001Z" fill="#A7A7A7" />
      </svg>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Vestuário</a>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path d="M12.172 12.0001L9.343 9.17208L10.757 7.75708L15 12.0001L10.757 16.2431L9.343 14.8281L12.172 12.0001Z" fill="#A7A7A7" />
      </svg>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Camisas</a>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path d="M12.172 12.0001L9.343 9.17208L10.757 7.75708L15 12.0001L10.757 16.2431L9.343 14.8281L12.172 12.0001Z" fill="#A7A7A7" />
      </svg>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--active" href="#">Nova Coleção</a>
   </li>
</ul>

HTML Dinâmico

<!-- Use o código a seguir para o breadcrumb da página de categorias -->

<ul class="breadcrumb">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" {{ _href('/') }}>Página Inicial</a>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M12.172 12.0001L9.343 9.17208L10.757 7.75708L15 12.0001L10.757 16.2431L9.343 14.8281L12.172 12.0001Z" fill="#A7A7A7" />
      </svg>
    </li>

    {% for path in category.breadcrumb %}
      <li class="breadcrumb__item">
        <a class="breadcrumb__link {{ loop.last ? 'breadcrumb__link--active' : '' }}" {{ _href(path.path) }}>{{ path.name }}</a>

        {% if loop.last != true %}
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M12.172 12.0001L9.343 9.17208L10.757 7.75708L15 12.0001L10.757 16.2431L9.343 14.8281L12.172 12.0001Z" fill="#A7A7A7" />
          </svg>
        {% endif %}
      </li>
    {% endfor %}
</ul>


<!-- Use o código a seguir para o breadcrumb da página de produtos -->

<ul class="breadcrumb">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" {{ _href('/') }}>Página Inicial</a>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M12.172 12.0001L9.343 9.17208L10.757 7.75708L15 12.0001L10.757 16.2431L9.343 14.8281L12.172 12.0001Z" fill="#A7A7A7" />
      </svg>
    </li>

    {% for path in product.breadcrumb %}
      <li class="breadcrumb__item">
        <a class="breadcrumb__link {{ loop.last ? 'breadcrumb__link--active' : '' }}" {{ _href(path.path) }}>{{ path.name }}</a>

        {% if loop.last != true %}
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M12.172 12.0001L9.343 9.17208L10.757 7.75708L15 12.0001L10.757 16.2431L9.343 14.8281L12.172 12.0001Z" fill="#A7A7A7" />
          </svg>
        {% endif %}
      </li>
    {% endfor %}
</ul>

CSS

.breadcrumb {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    height: 24px;
}

.breadcrumb__item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.breadcrumb__item .breadcrumb__link {
    color: #8E8E8E;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    cursor: pointer;
}

.breadcrumb__link--active{
    color: #000000!important;
}

.breadcrumb__item svg {
    color: #A7A7A7;
    width: 24px;
    height: 24px;
    margin-left: 8px;
}

Breadcrumb com barras

Preview

HTML Estático

<ul class="breadcrumb">
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Página Inicial</a>
      <span>/</span>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Vestuário</a>
      <span>/</span>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Camisas</a>
      <span>/</span>
   </li>
   <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--active" href="#">Nova Coleção</a>
   </li>
</ul>

HTML Dinâmico

<!-- Use o código a seguir para o breadcrumb da página de categorias -->

<ul class="breadcrumb">
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" {{ _href('/') }}>Página Inicial</a>
      <span>/</span>
   </li>

   {% for path in category.breadcrumb %}
    <li class="breadcrumb__item">
        <a class="breadcrumb__link {{ loop.last ? 'breadcrumb__link--active' : '' }}" {{ _href(path.path) }}>{{ path.name }}</a>

        {% if loop.last != true %}
          <span>/</span>
        {% endif %}
    </li>
   {% endfor %}
</ul>


<!-- Use o código a seguir para o breadcrumb da página de produtos -->

<ul class="breadcrumb">
   <li class="breadcrumb__item">
      <a class="breadcrumb__link" {{ _href('/') }}>Página Inicial</a>
      <span>/</span>
   </li>

   {% for path in product.breadcrumb %}
    <li class="breadcrumb__item">
        <a class="breadcrumb__link {{ loop.last ? 'breadcrumb__link--active' : '' }}" {{ _href(path.path) }}>{{ path.name }}</a>

        {% if loop.last != true %}
          <span>/</span>
        {% endif %}
    </li>
   {% endfor %}
</ul>

CSS

.breadcrumb {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    height: 24px;
}

.breadcrumb__item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.breadcrumb__item .breadcrumb__link,
.breadcrumb__item span {
    color: #8E8E8E;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.breadcrumb__item .breadcrumb__link{
    cursor: pointer;
}

.breadcrumb__item span{
    margin-left: 8px;
}

.breadcrumb__link--active{
    color: #000000!important;
}