Navbar [y2nav]
Barra de navegação responsiva com hamburguer, scroll-shadow, sticky/fixed, dropdowns animados, mega menu e templates prontos para produção.
1. Estrutura HTML
2. Templates Prontos
Navbars completas para copiar e usar em produção.
Template 1 — SaaS Clean
Template 2 — Dark Premium
— hero content —
Template 3 — Glassmorphism sobre Hero
— hero gradient background —
Template 4 — E-commerce (Search + Cart + Avatar)
Template 5 — Dashboard / App
Template 6 — Bold Gradient
— hero gradient background —
Template 7 — Developer / Docs
3. Variantes de Cor & Posição
Adicione uma ou mais classes modificadoras no elemento [y2nav].
A sombra aparece automaticamente ao rolar.
4. Alinhamento do Menu
Menu centralizado — y2nav-mn class="y2nav-ctr"
Menu à direita — y2nav-mn class="y2nav-end"
5. Dropdown & Mega Menu
Submenus infinitos. Desktop: hover com delay 180ms. Mobile: accordion vertical.
6. Sticky + Scroll Shadow
Role a página. A navbar abaixo gruda no topo e ganha sombra automaticamente via JS (.y2nav-scrl).
↑ Role para testar o Sticky + Scroll Shadow
7. Responsivo / Mobile
- Hamburguer anima para X ao abrir
- Menu abre em painel deslizante com overlay
- Dropdowns se tornam accordions verticais
- Clique fora fecha o menu automaticamente
y2nav-mob-hdrexibe logo + botão fechar no topo do painel
8. API JavaScript
Quick Reference
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) |
[y2nav-mob-hdr] | div | Cabeçalho do painel mobile (logo + fechar) |
Variantes
| Classe | Efeito |
|---|---|
.y2nav-stk | Sticky (position:sticky; top:0) |
.y2nav-fix | Fixed (flutua sobre o conteúdo) |
.y2nav-drk | Fundo escuro |
.y2nav-pri | Fundo na cor primária |
.y2nav-gls | Glassmorphism (backdrop-filter blur) |
.y2nav-brd | Transparente / apenas borda inferior |
.y2nav-scrl | Shadow adicionada automaticamente ao rolar (JS) |
Menu & Alinhamento
| 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] | div | Container do dropdown (gatilho + menu) |
[y2nav-lnk] | button | Gatilho com chevron animado automático |
[y2nav-drp-mn] | div | Menu suspenso (suporta Grid CSS interno) |
.y2nav-has-sub | [y2nav-drp-it] | Item com 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 |
[y2nav-drp-it] | a / div | Item de link dentro do dropdown |
[y2nav-ico] | i | Ícone à esquerda do item de dropdown |
[y2nav-desc] | span | Texto descritivo abaixo do título do item |
.y2nav-mg | [y2nav-drp] | Mega Menu centralizado e largo |