# Menu de Categorias com ver mais categorias

Exibe o menu com algumas categorias e a opção de ver mais categorias. Ao passar o mouse sobre "+ categorias" é possível ver o restante delas.

<figure><img src="/files/TRe01OOflbTpextJRqoU" alt=""><figcaption><p><strong>Exemplo de exibição do menu com ver mais categorias</strong></p></figcaption></figure>

Snippet para criar um menu exibindo 6 categorias, e as demais dentro do contexto mais categorias.

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

```html
{#
# Menu de categorias com ver mais categorias
# elements/snippets/menu_more_categories.html
#}

{% set more_quantity = 6 %}

{% if categories | length > more_quantity %}
    {% set show_categories = categories | slice(0, more_quantity) %}
    {% set more_categories = categories | slice(more_quantity) %}
{% else %}
    {% set show_categories = categories %}
    {% set more_categories = null %}
{% endif %}

<nav class="nav">
    <div class="container">
        <ul class="list">

            {% for category in show_categories %}
                <li class="first-level">                    
                    <a href="{{ category.link }}" title="{{ category.name }}">
                        {{ category.name }}
                    </a>                    
                </li>
            {% endfor %}

            {% if more_categories %}
                <li class="first-level sub">

                    <span role="button" title="Departamentos">
                        + Categorias
                    </span>

                    <ul class="sub-list second-level">                    
                        {% for category in more_categories %}                            
                            <li>                                
                                <a href="{{ category.link }}" title="{{ category.name }}">{{ category.name }}</a>
                            </li>
                        {% endfor %} 
                    </ul> 
                                       
                </li>
            {% endif %}

        </ul>
    </div>
</nav>
```

{% endtab %}

{% tab title="CSS" %}

```css
.nav{
    position: relative;
    background-color: #fff;
}

.nav .container{
    max-width: 1200px;
    margin: 0 auto;
}

.nav .list{
    display: flex;
    justify-content: space-between;
}

.nav .list,
.nav .list > .first-level{
    position: relative;    
}

.nav .list > li > a,
.nav .list > li > span{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.12rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    color: #000;
    z-index: 2;
    transition: ease-out 0.2s;
}

.nav .list .second-level{
    position: absolute;
    top: 100%;
    min-width: 275px;
    width: auto;
    padding: 2.0625rem 2.5rem;
    opacity: 0;
    visibility: hidden;
    background-color: #f5f5f5;
    box-shadow: 0 4px 8px rgb(0 0 0 / 6%);
}

.nav .first-level:hover .second-level{
    opacity: 1;
    visibility: visible;
}

.nav .list > li.sub > .sub-list > li a{
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #000;
}

```

{% endtab %}
{% endtabs %}

Caso queira aumentar ou diminuir a quantidade de categorias a serem exibidas antes de criar o mais categorias, basta alterar o numero da variável `more_quantiy`

```
{% set more_quantity = 6 %}
```

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

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

Faça a chamada desse arquivo onde desejar:

```
{% element('snippets/menu_more_categories') %}
```

Copie o código CSS e cole em sua folha de estilo.


---

# 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/componentes/menu-de-categorias-com-ver-mais-categorias.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.