Como deixar o submenu da sua loja Nuvemshop em cascata com CSS

Se você tem uma loja na Nuvemshop, provavelmente já reparou: na maioria dos layouts, quando o visitante passa o mouse sobre um item do menu principal no desktop, o submenu abre espalhado na horizontal, ocupando a largura total da tela. Os itens ficam dispersos, misturados em colunas, e o cliente precisa 'caçar' o que procura. O resultado é uma navegação confusa — e navegação confusa significa cliente que desiste de encontrar a categoria e sai da loja.

A boa notícia: dá para resolver isso com um pequeno código de CSS personalizado, sem trocar de layout e sem contratar nada complexo. Neste tutorial você vai entender o problema, ver o passo a passo em vídeo e copiar o código pronto para colar na sua loja.

Por que o submenu padrão da Nuvemshop atrapalha suas vendas

No comportamento padrão da maioria dos layouts Nuvemshop, os submenus da barra de navegação principal abrem em formato horizontal, distribuídos em colunas que ocupam toda a largura da tela. Na prática, isso causa três problemas reais:

• Dificuldade de leitura: o olho do usuário não sabe por onde começar, pois os itens não seguem uma hierarquia visual clara
• Sensação de poluição visual: a loja parece desorganizada, o que prejudica a percepção de profissionalismo da marca
• Cliques perdidos: com itens espalhados, o cliente erra o alvo, se frustra e abandona a navegação — e cada abandono é uma venda a menos

O menu é a porta de entrada para as categorias da sua loja. Se essa porta é confusa, todo o funil de vendas sofre. Por isso, pequenos ajustes de usabilidade no menu costumam ter impacto direto na taxa de navegação e na conversão.

A solução: submenu em cascata

O submenu em cascata é o padrão que os usuários já conhecem de grandes lojas e sistemas: ao passar o mouse sobre um item do menu, as subcategorias aparecem em uma lista vertical, alinhada logo abaixo do item pai, com largura contida e visual limpo.

• Mais intuitivo: a lista vertical segue o padrão de leitura natural (de cima para baixo)
• Mais organizado: cada item tem seu espaço, sem competir por atenção
• Mais elegante: o dropdown fica compacto, com cantos arredondados, combinando com lojas profissionais

E o melhor: a implementação leva menos de 5 minutos, usando apenas o campo de CSS personalizado do painel da Nuvemshop.

Vídeo: passo a passo na prática

No vídeo abaixo eu mostro exatamente onde fica o campo de CSS personalizado no painel da Nuvemshop, como aplicar o código e o antes e depois do menu na loja:

O código CSS pronto para copiar

Copie o código abaixo e cole no campo de CSS personalizado do seu layout (no painel Nuvemshop: Minha Nuvemshop → Layout → Personalizar layout → Códigos → CSS personalizado). Depois é só salvar e ver o resultado na loja:

.desktop-list-subitems {
  padding: 15px 25px 25px 25px;
  text-align: left;
  column-count: inherit;
  column-gap: inherit;
}

.desktop-dropdown {
  left: inherit;
  width: 15%;
}

.head-light .desktop-list-subitems {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

Pronto! Com isso o submenu passa a abrir em formato de cascata, com largura contida e cantos inferiores arredondados.

Como o código funciona (entenda cada trecho)

• .desktop-list-subitems: ajusta o espaçamento interno do submenu, alinha os textos à esquerda e remove a divisão em colunas, fazendo os itens empilharem verticalmente
• .desktop-dropdown: reposiciona o dropdown logo abaixo do item do menu e limita a largura em 15% da tela, criando o efeito cascata
• .head-light .desktop-list-subitems: adiciona bordas arredondadas na parte inferior do submenu para layouts com cabeçalho claro, deixando o visual mais suave e moderno

Dica: se a largura de 15% ficar estreita demais para os nomes das suas categorias, experimente ajustar o valor de width para 20% ou 25% até encontrar o ponto ideal para a sua loja.

Quer ir além no visual da sua loja?

Esse ajuste de submenu é só um exemplo do que dá para fazer com CSS personalizado na Nuvemshop. Banners otimizados, vitrines mais atrativas, checkout turbinado e integrações com Google Shopping e Instagram Shopping são outros pontos que fazem uma loja vender mais — e é exatamente o que fazemos todos os dias na Planweb.