# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/breadcrumb.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.