Navbar Y2Nav
Barra de navegação responsiva com menu hamburguer, scroll-shadow automático, sticky/fixed, dropdowns animados, variantes de cor e efeito glassmorphism.
1. Estrutura HTML
A navbar é composta por [y2nav]
como container e filhos semânticos para brand, menu e ações. O atributo y2nav-toggle
conecta o botão hamburguer ao menu colapsível.
2. Variantes de Estilo
Adicione uma ou mais classes modificadoras no elemento [y2nav].
[y2nav][drk]
[pri][gls][brd][stk]
A classe [scrl] adicionada automaticamente pelo JS ao rolar.
3. Alinhamento do Menu
O [y2nav-mn]
aceita modificadores de alinhamento.
Menu centralizado com o modificador ctr
Menu colado à direita com o modificador end
4. Dropdowns Multinível & Mega Menu
A Y2 suporta submenus infinitos e Mega Menus. No desktop, os dropdowns possuem latência inteligente (180ms) ao sair com o mouse, garantindo fluidez.
5. Teste de Profundidade (Nível 1-2-3)
Use este exemplo simplificado para testar a estabilidade dos sub-submenus no desktop (hover) e mobile (click).
6. Teste de Sticky Navbar
Role a página para baixo. A Navbar abaixo ficará presa ao topo da janela e ganhará
uma sombra (.y2nav-scrl) nativamente
através do y2.js.
? Continue rolando para testar o efeito Sticky + Scroll Shadow. ?
7. Responsivo / Mobile
Abaixo de 992px o botão hamburguer aparece e o menu colapsa. O atributo
y2nav-toggle
no botão deve apontar para o id do y2nav-col.
- Hamburguer anima para X ao abrir
- Menu abre abaixo da navbar com sombra
- Dropdowns se tornam accordions verticais
- Clique fora fecha o menu automaticamente
8. API JavaScript
O Y2Nav inicializa automaticamente ao carregar a página. Não é necessária nenhuma chamada JS manual.
// Y2Nav é inicializado automaticamente por Y2.init()
// Para reinicializar em conteúdo carregado via y2-ajax:
Y2.reinit(document.querySelector('#minha-area'));
// O scroll-shadow e glassmorphism são inteligentemente gerenciados
// pelo atributo [stk] ou [fix]. A Sombra (.is-scrl) aparece assim
// que uma navbar 'stk' gruda no topo e há rolagem nativa detectada!
Estrutura
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
[y2nav] |
nav | Container principal da navbar |
[y2nav-box] |
div | Inner container com max-width e padding |
[y2nav-brd] |
a | Brand / logo |
[y2nav-col] |
div | Área colapsível (menu + ações) |
[y2nav-mn] |
nav | Lista de links principais |
[y2nav-it] |
a | Link / item de menu |
[y2nav-act] |
div | Área de ações (botões direita) |
[y2nav-tgl] |
button | Botão hamburguer (mobile) |
Variantes
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
.y2nav-stk |
[y2nav] | Sticky (position: sticky; top: 0) |
.y2nav-fix |
[y2nav] | Fixed (position: fixed; flutua sobre o conteúdo) |
.y2nav-drk |
[y2nav] | Fundo escuro |
.y2nav-pri |
[y2nav] | Fundo na cor primária |
.y2nav-gls |
[y2nav] | Glassmorphism (backdrop-filter blur) |
.y2nav-brd |
[y2nav] | Transparente / apenas borda inferior |
.y2nav-scrl |
[y2nav] | Shadow adicionada automaticamente ao rolar |
Menu
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
.y2nav-ctr |
[y2nav-mn] | Links centralizados |
.y2nav-end |
[y2nav-mn] | Links alinhados à direita |
.y2nav-act |
[y2nav-it] | Item ativo (cor primária) |
Dropdown & Mega Menu
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
[y2nav-drp] |
li | Container do dropdown (Nível 1) |
.y2nav-mg |
[y2nav-drp] | Mega Menu centralizado e largo |
[y2nav-lnk] |
a | Gatilho com chevron animado automático |
[y2nav-drp-mn] |
div | Menu suspenso (suporta Grid CSS interno) |
.y2nav-has-sub |
[y2nav-drp-it] | Item que contém um submenu lateral |
[y2nav-drp-sub] |
div | Submenu lateral (Nível 2 e 3) |
[y2nav-drp-ttl] |
span | Título de seção dentro do dropdown |
[y2nav-drp-sep] |
hr | Separador horizontal dentro do dropdown |
[y2nav-drp-it] |
a | Item de link dentro do dropdown |
Atributos JS
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
y2nav-toggle="#id" |
button | Conecta o botão hamburguer ao [y2nav-col] |
aria-expanded |
button | Atualizado automaticamente pelo JS |