Menu Luminária Plus

Barra de navegação em cápsula de vidro fosco: no clique, a luminária em cima do item ativo desliza até o novo numa mola.

Ver na loja e baixar

Sobre este efeito

Barra de navegação em cápsula, de vidro fosco, flutuando no topo da capa. O item ativo tem uma luminária: um filete de luz na borda de cima com o brilho escorrendo pra dentro. No clique, a luminária e a película clara deslizam até o item novo numa mola que passa um tiquinho do lugar e volta, mudando de largura no caminho, e o fundo do item troca. No celular, a barra desce pro pé da tela e os rótulos viram ícones. Cor e força da luz, largura do filete, fundo do item ativo, rigidez e freio da mola ajustáveis; links de verdade, que marcam a página atual; modo só-visual pra âncoras e SPA. Sem biblioteca.

Ficha

Categoria: Menu
Onde combina: menu/navegação, topo (hero)
Alcance: Área: vive dentro de um bloco da página.
Plano: Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).
Peso: 5,1 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 7% do processador de um celular intermediário enquanto anima.
Na loja desde: 11/09/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-menu-luminaria.

Assuntos

menu
navegacao
navbar
abas
tubelight
luz
brilho
glow
mola
vidro
clique