Menus (desktop, submenu e mobile)
Personalizado independentes: ative só o que for personalizar. Todos são manuais puros (@foreach + CSS próprio, sem componentes).INÍCIO + 5 primeiras categorias com dropdown CSS no hover + MAIS CATEGORIAS com o restante (offset 5). O botão some sozinho sem excedente (regra :has() no CSS; sem suporte, degrada para botão visível). Some se o menu estiver desativado na loja — proteja com @if(feature('mostrar_menu_categorias')).data-fz-toggle). A seção de categorias respeita o menu da loja; busca e atalhos sempre aparecem. Minha conta usa link('account') (sem cadastro + deslogado, a linha fica inativa).class="link-categoria" + data-categoria-id/nome/superior para navegar sem recarregar a página.Exemplos prontos
Menu desktop manual
@if(feature('mostrar_menu_categorias'))
<a href="{{ link('home') }}">INÍCIO</a>
@foreach(categories as category limit 5)
<a href="{{ category.url }}">{{ category.name }}</a>
@endforeach
@endifSubmenu com loop aninhado
@if(feature('mostrar_menu_categorias'))
@foreach(categories as category)
@foreach(category.subcategories as subcategory)
<a href="{{ subcategory.url }}">{{ subcategory.name }}</a>
@endforeach
@endforeach
@endifMenu mobile manual
<strong>{{ store.name }}</strong>
@foreach(categories as category)
<a href="{{ category.url }}">{{ category.name }}</a>
@endforeachGrade Descobrir + promo Novidades (como o Modelo 1 fixo)
<a href="{{ link('lancamentos') }}">Lançamentos</a>
<a href="{{ link('mais_vendidos') }}">Mais vendidos</a>
<a href="{{ link('promocoes') }}">Promoções</a>
<a href="{{ link('novidades_semana') }}">Novidades da semana</a>Categoria com thumb
@foreach(categories as category)
<a href="{{ category.url }}">
<img src="{{ category.image_thumb }}" alt="{{ category.name }}" loading="lazy">
{{ category.name }}
</a>
@endforeachPadrões CSS prontos
.fz-custom-header { position: sticky; top: 0; z-index: 1000; } — gruda no scroll sem cobrir o conteúdo global (não use position: fixed com body, que é bloqueado).position: relative + submenu position: absolute; top: 100%; left: 0; display: none; + container:hover submenu { display: block; } — mesmo padrão dos modelos fixos, puro :hover.data-fz-drawer + position: fixed; top: 0; left: 0; height: 100dvh; width: min(86vw, 340px); z-index: 9998; transform: translateX(-102%); e a regra [data-fz-drawer].open { transform: none; }, com overlay em z-index: 9997. A abertura/fechamento usa o mecanismo da plataforma: botão com data-fz-action="menu-mobile" alterna a classe open no painel (o X, o clique no overlay e o Escape já vêm prontos; enquanto aberto, o body recebe fz-menu-mobile-starter-open). Mantenha-se abaixo de 10000 para não cobrir modais da plataforma (carrinho, busca, políticas) — diferente dos drawers fixos (que ficam acima de tudo, ~999998), o drawer custom abre esses recursos por cima dele.Resto além das 5 primeiras
@foreach(categories as category offset 5)
<a href="{{ category.url }}">{{ category.name }}</a>
@endforeachModificado em 2026-09-09 02:01:40