> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/menu-de-categorias-com-imagens.md).

# Menu de Categorias com Imagens

Snippet para criar um menu de categorias, exibindo a imagem da categoria principal junto com o bloco das subcategorias.

Lembrando que as imagens devem ser cadastradas através do aplicativo Imagens na Categoria e Subcategorias (<https://aplicativos.tray.com.br/aplicativo/layout-tray-imagens-na-categoria>)

{% tabs %}
{% tab title="HTML" %}

```html
{#
  # Menu de Categorias com Imagem
  # elements/snippets/categories_menu_image.html
#}
<ul class="menu">
  {% for category in categories %}
    {% if loop.index <= limit or not limit %}
      {% set children = category.children %}
      <li>
        <a href="{{ category.link }}">{{ category.name }}</a>
        {% if children %}
          <ul class="menu-children">
            {% if category.images %}
              <figure class="category-submenu-image">
                <img src="{{ category.images[0] }}" alt="{{ category.name }}">           
              </figure>
            {% endif %}
            {% for child in children %}
              <li>
                <a href="{{ child.link }}">{{ child.name }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endif %}
  {% endfor %}
</ul>
```

{% endtab %}

{% tab title="CSS" %}

```css
.menu{
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.menu li{
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0;
}
.menu .menu-children{
    display: none;
    position: absolute;
    top: 15px;
    left: 0;
    width: 350px;
    z-index: 9999;
    padding: 10px;
    overflow: auto;
    background: #FFF;
}
.menu li:hover .menu-children{
    display: block;
}
.category-submenu-image{
    float: left;
    margin: 0 10px 0 0;
}
.menu .menu-children li{
    display: block;
}
```

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

Copie o código acima e crie um arquivo separado, ex: `elements/snippets/categories_menu_image.html`

Faça a chamada desse arquivo onde desejar:

```twig
{% element('snippets/categories_menu_image') %}
```

Copie o CSS e cole em sua folha de estilo.