Navbar [sw-navbar]
Barra de navegação responsiva — variantes glass/gradiente, encolhe e ganha blur ao rolar, dropdown embutido e toggle mobile (hambúrguer → X). Zero dependências, mesma convenção de atributos do Sidebar.
1. Navbar Básica mode="static"
Fica no fluxo normal da página, sem sticky nem sombra ao rolar — ideal pra topo de uma landing page.
2. Sticky + Glass — encolhe ao rolar
sw-navbar-mode="sticky" + sw-navbar-fx="glass". Role dentro da caixa
abaixo — a navbar fica menor, ganha blur e sombra (efeito clássico de navbar flutuante estilo
Material Kit). Altura normal e encolhida controladas por variável CSS
(--sw-navbar-h / --sw-navbar-h-shrink) — ajuste livre, sem duplicar CSS.
Role para baixo dentro desta caixa ↓
A navbar acima está com position: sticky — ela gruda no topo desta área e, depois de ~30px de rolagem, ganha o atributo [scrolled] automaticamente via JS.
Isso ativa uma altura menor, fundo com blur mais forte e sombra — tudo via CSS, sem nenhuma classe manual.
Continue rolando...
Fim do conteúdo de demonstração.
3. Variante Gradiente fx="grad"
Fundo com --sw-grad-pri e texto claro automático — combina com heros coloridos.
4. Item com Dropdown sw-navbar-drop
Envolva o gatilho e o menu num sw-navbar-drop-wrap — o gatilho leva sw-navbar-drop, o menu é sw-navbar-drop-mn como irmão (nunca filho do link, já que um <a> não pode conter outro <a>). Clique em "Produtos" abaixo.
4b. Lado do Dropdown sw-navbar-drop-align
Por padrão o menu abre alinhado à esquerda do gatilho (left:0) — ótimo pra itens
no meio do menu. Perto da borda direita da navbar (ex.: dentro de sw-navbar-actions,
como um menu de usuário) isso vazaria pra fora da tela — use sw-navbar-drop-align="right"
no sw-navbar-drop-wrap pra abrir alinhado à direita (right:0) em vez disso.
4c. Mega Menu wide
Pra submenus com muitos links, adicione o atributo wide no sw-navbar-drop-mn —
ele vira uma grade de 2 colunas, agrupadas com sw-navbar-drop-col e um rótulo
sw-navbar-drop-ttl por grupo. No mobile colapsa pra 1 coluna automaticamente.
4d. Submenu Aninhado has-sub
Dentro de um sw-navbar-drop-mn, um item pode abrir OUTRO menu do lado — use
<div sw-navbar-drop-it has-sub> (é <div>, não <a>,
justamente pra poder conter o sw-navbar-drop-sub como filho) envolvendo o submenu.
Abre no hover (desktop) e no clique (touch); some da tela (some, mesmo) e vira accordion no mobile.
4f. Templates Prontos
Cinco navbars completas pra copiar — todas com dropdown e pelo menos um submenu aninhado de verdade (não é só decoração), e todas funcionam igual no mobile: vira o drawer lateral com accordion. Redimensione a janela pra conferir.
Template 1 — SaaS CleanEstilo flat de e-commerce — zero border-radius, links uppercase espaçados, mega menu de 2 colunas + imagem de destaque, submenu aninhado em "Jackets", badge quadrado no carrinho. No mobile vira o mesmo drawer lateral dos outros templates (nenhum CSS extra precisou ser escrito pra isso).
5. Toggle Mobile
Abaixo de 768px de largura, [sw-navbar-mn] vira um drawer que
desliza da lateral direita (não cobre a tela inteira) com um overlay escurecido atrás,
e o botão [sw-navbar-tgl] (hambúrguer → X) aparece automaticamente. Redimensione
a janela do navegador pra ver — nenhum atributo extra é necessário, o comportamento já vem
embutido no componente.
Clicar num item do menu, clicar no overlay escurecido ou apertar Esc fecha o painel automaticamente. Dropdowns e submenus aninhados viram accordion vertical dentro do drawer.
Quick Reference
| Atributo | Elemento | Descrição |
|---|---|---|
sw-navbar-mode | nav | static (padrão) · fixed · sticky |
sw-navbar-fx | nav | glass (blur translúcido) · grad (gradiente) |
sw-navbar-shrink-at | nav | Pixels de rolagem até ativar [scrolled] — padrão 40. |
--sw-navbar-h | nav (style="") | Altura normal da navbar — padrão 7rem. Ajuste direto no elemento, sem tocar no CSS-fonte. |
--sw-navbar-h-shrink | nav (style="") | Altura ao ganhar [scrolled] — padrão 5.8rem. |
[scrolled] | nav | Setado automaticamente pelo JS ao rolar (modos fixed/sticky). |
[open] | nav | Menu mobile aberto — alternado pelo [sw-navbar-tgl]. |
sw-navbar-brand | a | Logo/marca à esquerda. |
sw-navbar-mn | div | Container dos links — vira drawer lateral no mobile. |
align="center" / "end" | [sw-navbar-mn] | Centraliza ou joga o grupo de links pra direita (padrão: esquerda). |
sw-navbar-it | a | Link de navegação — clique marca como ativo. |
[act] | [sw-navbar-it] | Marca o item como ativo. |
sw-navbar-drop-wrap | div | Envolve gatilho + menu — necessário pro posicionamento do dropdown. |
sw-navbar-drop + sw-navbar-drop-arr | a / i | Item pai com dropdown — seta gira ao abrir. |
sw-navbar-drop-align="right" | [sw-navbar-drop-wrap] | Abre o menu alinhado à direita em vez de à esquerda — usar perto da borda direita da navbar. |
sw-navbar-drop-mn / -drop-it | div / a | Menu suspenso (irmão do gatilho de topo) e seus itens. |
sw-navbar-drop-ttl | span | Rótulo de seção dentro do menu (uppercase, discreto). |
sw-navbar-drop-desc | span | Linha de descrição abaixo do título do item. |
sw-navbar-drop-sep | div | Linha divisória entre grupos de itens. |
[wide] | [sw-navbar-drop-mn] | Vira mega menu em grade de 2 colunas — use com sw-navbar-drop-col. |
has-sub | div[sw-navbar-drop-it] | Item com submenu de nível 3 — precisa ser <div> (não <a>) pra poder conter o sw-navbar-drop-sub filho. |
sw-navbar-drop-sub | div | Submenu que abre pro lado (nível 3+) — hover no desktop, clique no touch. |
sub-align="left" | div[has-sub] | Abre o submenu de nível 3 pro lado esquerdo em vez do direito. |
sw-navbar-actions | div | Slot à direita — botões, busca etc. |
sw-navbar-tgl | button | Hambúrguer mobile — 3 <span> viram um X quando aberto. |
[sw-navbar-ovl] | div | Overlay escurecido atrás do drawer mobile — criado e controlado automaticamente pelo JS. |
sw:navbar:toggle / :dropdown | evento | Disparados pelo componente. |