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.

Exemplo de exibição do menu com ver mais categorias

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

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>

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;
}

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

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.