# breadcrumb

O `breadcrumb` é responsável por retornar um array com as informações de localização das categorias relacionadas.

{% hint style="danger" %}
**Disponível para uso nas páginas:** catalog | product | search
{% endhint %}

{% hint style="info" %}
**Para saber mais sobre categorias acesse:** [Cadastrar categorias](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6734145561243-Cadastrar-Categorias)
{% endhint %}

### Atributos disponíveis

É possível usar o objeto `breadcrumb` para exibir a estrutura de navegação da hierarquia de categorias e subcategorias até a página atual. Por isso é possível montar uma chamada própria usando os atributos abaixo:

| Atributos               | Característica                  |
| ----------------------- | ------------------------------- |
| `{{ breadcrumb.name }}` | Retorna o nome da categoria     |
| `{{ breadcrumb.link }}` | retorna o link para a categoria |

## Como Usar

Para imprimir um `breadcrumb`, é preciso chamar o snippet em um arquivo html do tema, que pode ser a página de produto, de pesquisa ou de categoria, como o exemplo abaixo:

{% code title="catalog.html" %}

```twig
{% element 'snippets/breadcrumb' %}
```

{% endcode %}

O uso dos atributos do objeto no código HTML deve seguir como o formato básico abaixo:

{% code title="Input" %}

```html
<div class="breadcrumb">
  <span class="breadcrumb-item"><a href="/">{{ Translation('pagina_inicial') }}</a></span>
  <span class="icon-breadcrumb">/</span>
  {% if breadcrumb %}
    {% for item in breadcrumb %}
      <span class="breadcrumb-item">
        <a href="{{ item.link}}" title="{{ item.name }}">{{ item.name }}</a>
      </span>
      <span class="icon-breadcrumb">/</span>
    {% endfor %}
    <span class="breadcrumb-item">{{ pages.current == 'product' ? product.name : category.name }}</span>
  {% endif %}
</div>
```

{% endcode %}

{% code title="Output" %}

```html
<div class="breadcrumb">
  <span class="breadcrumb-item"><a href="/">Página Inicial</a></span>
  <span class="icon-breadcrumb">/</span>
  <span class="breadcrumb-item">
    <a href="www.sualoja/outlet" title="Outlet">Outlet</a>
  </span>
  <span class="icon-breadcrumb">/</span>
  <span class="breadcrumb-item">Camisa</span>
</div>
```

{% endcode %}