SWCore
SWCore / Componentes / Navbar

Navbar Componentes

A barra do topo do site: logo, links, submenus e botões. No celular vira o ícone ☰ com menu saindo da lateral — sozinha. <nav sw-navbar>.

O que é

É o menu principal que fica no alto de quase todo site: o logo à esquerda, os links (Início, Serviços, Contato…) e um botão de ação ("Agendar", "Entrar", carrinho). O SWCore monta isso com atributos: sw-navbar na <nav>, sw-navbar-brand no logo, sw-navbar-mn na área dos links, sw-navbar-it em cada link, sw-navbar-actions nos botões e sw-navbar-tgl no botão ☰. Links podem abrir submenus, submenus dentro de submenus e até um mega-menu em colunas.

O JavaScript do núcleo mede a largura da tela: abaixo de 992 px (você muda com sw-navbar-collapse-at) a barra entra no modo celular — os links somem, aparece o ☰, e ao tocar nele o menu desliza pela lateral com uma cortina escura atrás (a cortina é criada sozinha). Submenus abrem ao passar o mouse ou clicar no computador, e viram sanfona no celular. Esc ou clique fora fecham tudo. Com sw-navbar-mode="sticky" ou "fixed" ela fica presa no topo e, depois de rolar um pouco, fica mais baixa e ganha sombra.

Quando usar

  • Topo de todo site institucional, loja, landing page ou blog.
  • Menu com muitas páginas: agrupe em submenus ou num mega-menu de colunas.
  • Topo por cima de foto/vídeo (hero): use o acabamento vidro, sw-navbar-fx="glass".
  • Para o menu lateral de um painel admin, use a Sidebar; a navbar é para o topo.

Comece aqui

  1. 1

    Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O JS é o que faz o ☰ e os submenus funcionarem. O segundo CSS traz os ícones swi-*.

    <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
    <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">
    
    <!-- fim do <body> -->
    <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>
  2. 2

    Monte a barra com as peças. act marca a página em que a pessoa está. Deixe o botão ☰ (com 3 <span>) sempre no final: ele só aparece no celular.

    <nav sw-navbar>
      <a href="/" sw-navbar-brand><i class="swi-cut"></i> Barbearia do Zé</a>
      <div sw-navbar-mn>
        <a sw-navbar-it act href="/">Início</a>
        <a sw-navbar-it href="/servicos">Serviços</a>
        <a sw-navbar-it href="/contato">Contato</a>
      </div>
      <div sw-navbar-actions><a href="/agendar" sw-btn="pri p">Agendar</a></div>
      <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
    </nav>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Posição dos links

O atributo align na área de links escolhe onde eles ficam. Sem ele, os links vêm logo depois do logo. Com center eles ficam exatamente no meio da barra (mesmo que o logo e os botões tenham larguras diferentes). Com end, encostados nos botões.

Padrão — links logo depois do logo
<nav sw-navbar>
  <a href="#" sw-navbar-brand>
    <i class="swi-aperture"></i>
    Estúdio Luz
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Portfólio</a>
    <a sw-navbar-it href="#">Contato</a>
  </div>
  <div sw-navbar-actions>
    <a href="#" sw-btn="pri p">Orçamento</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
align="center" — links no meio
<nav sw-navbar>
  <a href="#" sw-navbar-brand>
    <i class="swi-aperture"></i>
    Estúdio Luz
  </a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Portfólio</a>
    <a sw-navbar-it href="#">Contato</a>
  </div>
  <div sw-navbar-actions>
    <a href="#" sw-btn="pri p">Orçamento</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
align="end" — links perto dos botões
<nav sw-navbar>
  <a href="#" sw-navbar-brand>
    <i class="swi-aperture"></i>
    Estúdio Luz
  </a>
  <div sw-navbar-mn align="end">
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Portfólio</a>
    <a sw-navbar-it href="#">Contato</a>
  </div>
  <div sw-navbar-actions>
    <a href="#" sw-btn="pri p">Orçamento</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>

2. Acabamento (cor de fundo)

Sem nada, a barra usa a cor de superfície do tema (clara de dia, escura à noite). sw-navbar-fx="grad" pinta com degradê da cor primária para a secundária, com texto branco. sw-navbar-fx="glass" é vidro fosco: deixa ver, desfocado, o que passa atrás — use por cima de foto ou vídeo (o fundo colorido do último quadro representa a sua foto).

Padrão — cor de superfície
<nav sw-navbar>
  <a href="#" sw-navbar-brand>
    <i class="swi-coffee"></i>
    Café Aroma
  </a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="#">Cardápio</a>
    <a sw-navbar-it href="#">Unidades</a>
  </div>
  <div sw-navbar-actions>
    <a href="#" sw-btn="pri p">Pedir</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
sw-navbar-fx="grad" — degradê
<nav sw-navbar sw-navbar-fx="grad">
  <a href="#" sw-navbar-brand>
    <i class="swi-coffee"></i>
    Café Aroma
  </a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="#">Cardápio</a>
    <a sw-navbar-it href="#">Unidades</a>
  </div>
  <div sw-navbar-actions>
    <a href="#" sw-btn="lit p">Pedir</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
sw-navbar-fx="glass" — vidro sobre foto
<nav sw-navbar sw-navbar-fx="glass">
  <a href="/" sw-navbar-brand><i class="swi-coffee"></i> Café Aroma</a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="/cardapio">Cardápio</a>
    <a sw-navbar-it href="/unidades">Unidades</a>
  </div>
  <div sw-navbar-actions><a href="/pedir" sw-btn="glass p">Pedir</a></div>
  <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
</nav>

3. Submenus

Um link que abre submenu fica dentro de <div sw-navbar-drop-wrap>, ganha sw-navbar-drop e, logo depois dele, a caixa <div sw-navbar-drop-mn> com os itens sw-navbar-drop-it. Abre ao passar o mouse ou clicar. Passe o mouse em "Serviços" e em "Minha conta".

Submenu simples, com separador
<div sw-navbar-drop-wrap>
  <a sw-navbar-it sw-navbar-drop href="#">Serviços <i class="swi-chevron-down" sw-navbar-drop-arr></i></a>
  <div sw-navbar-drop-mn>
    <a sw-navbar-drop-it href="/reformas">Reformas</a>
    <a sw-navbar-drop-it href="/pintura">Pintura</a>
    <div sw-navbar-drop-sep></div>
    <a sw-navbar-drop-it href="/orcamento">Orçamento grátis</a>
  </div>
</div>
Submenu aberto para a esquerda — sw-navbar-drop-align="right" no wrap
<!-- no último item da barra: a caixa abre para a esquerda e não sai da tela -->
<div sw-navbar-drop-wrap sw-navbar-drop-align="right">
  <a sw-navbar-it sw-navbar-drop href="#"><i class="swi-user-circle"></i> Minha conta <i class="swi-chevron-down" sw-navbar-drop-arr></i></a>
  <div sw-navbar-drop-mn>
    <a sw-navbar-drop-it href="/pedidos"><i class="swi-package"></i> Meus pedidos</a>
    <a sw-navbar-drop-it href="/favoritos"><i class="swi-heart"></i> Favoritos</a>
    <div sw-navbar-drop-sep></div>
    <a sw-navbar-drop-it href="/sair"><i class="swi-log-out"></i> Sair</a>
  </div>
</div>
Submenu dentro de submenu (3º nível) — has-sub
<div sw-navbar-drop-mn>
  <a sw-navbar-drop-it href="/oleo">Troca de óleo</a>
  <div sw-navbar-drop-it has-sub>Revisão          <!-- é <div>, não <a> -->
    <div sw-navbar-drop-sub>
      <a sw-navbar-drop-it href="/revisao-10">10 mil km</a>
      <a sw-navbar-drop-it href="/revisao-20">20 mil km</a>
      <a sw-navbar-drop-it href="/revisao-40">40 mil km</a>
    </div>
  </div>
  <a sw-navbar-drop-it href="/alinhamento">Alinhamento</a>
</div>
<!-- perto da borda direita: <div sw-navbar-drop-it has-sub sub-align="left"> abre para a esquerda -->
Mega-menu em colunas — sw-navbar-drop-mn wide
<div sw-navbar-drop-wrap>
  <a sw-navbar-it sw-navbar-drop href="#">Departamentos <i class="swi-chevron-down" sw-navbar-drop-arr></i></a>
  <div sw-navbar-drop-mn wide>                    <!-- wide = 2 colunas -->
    <div sw-navbar-drop-col>
      <span sw-navbar-drop-ttl>Casa</span>        <!-- título da coluna -->
      <a sw-navbar-drop-it href="/decoracao">
        <i sw-navbar-drop-ico class="swi-home"></i>
        <span>Decoração<span sw-navbar-drop-desc>Quadros, vasos e tapetes</span></span>
      </a>
      <a sw-navbar-drop-it href="/cozinha">
        <i sw-navbar-drop-ico class="swi-coffee"></i>
        <span>Cozinha<span sw-navbar-drop-desc>Panelas e utensílios</span></span>
      </a>
    </div>
    <div sw-navbar-drop-col>
      <span sw-navbar-drop-ttl>Você</span>
      <!-- …mais itens… -->
    </div>
  </div>
</div>

4. Logo e botões

O logo (sw-navbar-brand) aceita texto, ícone ou <img>. A classe sw-navbar-logo faz um selo quadrado em degradê para o ícone. Na área sw-navbar-actions vão botões, e a classe sw-navbar-social alinha ícones de redes sociais redondinhos.

Selo do logo — sw-navbar-logo
<nav sw-navbar>
  <a href="#" sw-navbar-brand>
    <span class="sw-navbar-logo">
      <i class="swi-rocket"></i>
    </span>
    Agência Voo
  </a>
  <div sw-navbar-mn align="end">
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Cases</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
Redes sociais + botão — sw-navbar-social
<nav sw-navbar>
  <a href="#" sw-navbar-brand>
    <i class="swi-camera"></i>
    Ana Fotografia
  </a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="#">Ensaios</a>
    <a sw-navbar-it href="#">Casamentos</a>
  </div>
  <div sw-navbar-actions>
    <span class="sw-navbar-social">
      <a href="#" aria-label="Instagram">
        <i class="swil-instagram"></i>
      </a>
      <a href="#" aria-label="WhatsApp">
        <i class="swil-whatsapp"></i>
      </a>
    </span>
    <a href="#" sw-btn="pri p">Agendar</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
Links com ícone e dois botões
<nav sw-navbar>
  <a href="#" sw-navbar-brand>
    <i class="swi-briefcase"></i>
    Contábil+
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">
      <i class="swi-home"></i>
      Início
    </a>
    <a sw-navbar-it href="#">
      <i class="swi-envelope"></i>
      Contato
    </a>
  </div>
  <div sw-navbar-actions>
    <a href="#" sw-btn="ghost p">Entrar</a>
    <a href="#" sw-btn="pri p">Criar conta</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>

5. Modo celular (menu ☰)

sw-navbar-collapse-at diz a partir de que largura de tela (em px) a barra vira ☰. Padrão 992. always = sempre ☰ (até no computador); never = nunca. sw-navbar-side escolhe de que lado o menu sai: right (padrão) ou left. Clique no ☰ destes quadros — o menu abre pela lateral da tela, por cima da página.

Sempre ☰, menu pela direita — collapse-at="always"
<nav sw-navbar sw-navbar-collapse-at="always">
  <a href="#" sw-navbar-brand>
    <i class="swi-cut"></i>
    Barbearia do Zé
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Serviços</a>
    <a sw-navbar-it href="#">Preços</a>
    <a sw-navbar-it href="#">Contato</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
Sempre ☰, menu pela esquerda — sw-navbar-side="left"
<nav sw-navbar sw-navbar-collapse-at="always" sw-navbar-side="left">
  <a href="#" sw-navbar-brand>
    <i class="swi-cut"></i>
    Barbearia do Zé
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Serviços</a>
    <div sw-navbar-drop-wrap>
      <a sw-navbar-it sw-navbar-drop href="#">
        Unidades
        <i class="swi-chevron-down" sw-navbar-drop-arr></i>
      </a>
      <div sw-navbar-drop-mn>
        <a sw-navbar-drop-it href="#">Centro</a>
        <a sw-navbar-drop-it href="#">Savassi</a>
      </div>
    </div>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>
Nunca vira ☰ — collapse-at="never"
<nav sw-navbar sw-navbar-collapse-at="never">
  <a href="#" sw-navbar-brand>
    <i class="swi-cut"></i>
    Zé
  </a>
  <div sw-navbar-mn align="end">
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Contato</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>

Tabela de opções

PalavraO que fazExemplo
Peças
sw-navbarNa <nav>: a barra inteira.<nav sw-navbar>
sw-navbar-brandO logo / nome do site (normalmente um link para a página inicial).<a href="/" sw-navbar-brand>
sw-navbar-mnA área dos links. No celular, é ela que vira o menu lateral.<div sw-navbar-mn>
sw-navbar-itCada link do menu.<a sw-navbar-it href="/">
actNo sw-navbar-it: marca a página atual (fica na cor primária). O clique também marca sozinho.<a sw-navbar-it act>
sw-navbar-actionsA área dos botões à direita (entrar, carrinho, agendar).<div sw-navbar-actions>
sw-navbar-tglO botão ☰ (com 3 <span> dentro). Só aparece no modo celular; vira ✕ quando aberto.<button sw-navbar-tgl>
Posição dos links
(nenhum)Logo depois do logo.
align="center"No sw-navbar-mn: links no meio exato da barra.<div sw-navbar-mn align="center">
align="end"No sw-navbar-mn: links encostados nos botões.<div sw-navbar-mn align="end">
Acabamento
(nenhum)Fundo na cor de superfície do tema, com linha embaixo.
sw-navbar-fx="grad"Degradê primária → secundária, texto branco.<nav sw-navbar sw-navbar-fx="grad">
sw-navbar-fx="glass"Vidro fosco — para usar sobre foto ou vídeo.<nav sw-navbar sw-navbar-fx="glass">
Ao rolar a página
sw-navbar-mode="static"Padrão: rola junto com a página.
sw-navbar-mode="sticky"Rola junto até encostar no topo e ali gruda.<nav sw-navbar sw-navbar-mode="sticky">
sw-navbar-mode="fixed"Presa no topo da tela o tempo todo (sai do fluxo: reserve o espaço dela).<nav sw-navbar sw-navbar-mode="fixed">
sw-navbar-shrink-atEm sticky/fixed: depois de quantos px rolados ela fica mais baixa e com sombra. Padrão 40.sw-navbar-shrink-at="120"
--sw-navbar-hVariável CSS: altura normal. Padrão 7rem.--sw-navbar-h: 8rem;
--sw-navbar-h-shrinkVariável CSS: altura depois de rolar. Padrão 5.8rem.--sw-navbar-h-shrink: 6rem;
Celular
sw-navbar-collapse-atLargura (px) em que vira ☰. always (ou 0) = sempre; never = nunca. Padrão 992.sw-navbar-collapse-at="768"
sw-navbar-sideLado de onde o menu sai: right (padrão) ou left.sw-navbar-side="left"
Submenu
sw-navbar-drop-wrapCaixa que envolve o link-pai e o submenu.<div sw-navbar-drop-wrap>
sw-navbar-dropNo sw-navbar-it que abre o submenu.<a sw-navbar-it sw-navbar-drop>
sw-navbar-drop-arrNo ícone de setinha dentro do link-pai: gira quando abre.<i class="swi-chevron-down" sw-navbar-drop-arr>
sw-navbar-drop-mnA caixa do submenu (logo depois do link-pai).<div sw-navbar-drop-mn>
sw-navbar-drop-itCada item do submenu.<a sw-navbar-drop-it>
sw-navbar-drop-sepLinha separando grupos de itens.<div sw-navbar-drop-sep></div>
sw-navbar-drop-align="right"No sw-navbar-drop-wrap: a caixa abre para a esquerda (para itens perto da borda direita).<div sw-navbar-drop-wrap sw-navbar-drop-align="right">
has-subNum <div sw-navbar-drop-it>: item que abre um 3º nível (sw-navbar-drop-sub) para o lado.<div sw-navbar-drop-it has-sub>
sw-navbar-drop-subA caixa do 3º nível, dentro do item has-sub.<div sw-navbar-drop-sub>
sub-align="left"No item has-sub: o 3º nível abre para a esquerda.<div sw-navbar-drop-it has-sub sub-align="left">
Mega-menu
wideNo sw-navbar-drop-mn: vira uma caixa larga de 2 colunas.<div sw-navbar-drop-mn wide>
sw-navbar-drop-colUma coluna do mega-menu.<div sw-navbar-drop-col>
sw-navbar-drop-ttlTítulo pequeno em maiúsculas (topo da coluna/grupo).<span sw-navbar-drop-ttl>Casa</span>
sw-navbar-drop-icoÍcone grande à esquerda do item.<i sw-navbar-drop-ico class="swi-home">
sw-navbar-drop-descDescrição curta embaixo do nome do item.<span sw-navbar-drop-desc>…</span>
Classes extras
sw-navbar-logoSelo quadrado em degradê para o ícone do logo.<span class="sw-navbar-logo"><i class="swi-rocket"></i></span>
sw-navbar-socialGrupo de ícones de redes sociais redondos, nas ações.<span class="sw-navbar-social">

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Topo que gruda e encolhe ao rolar (sticky) Ao vivo

Role esta caixa para baixo. A barra gruda no topo, fica mais baixa e ganha sombra.

Apartamento 3 quartos no Centro — R$ 450 mil.

Casa com quintal no Jardim América — R$ 620 mil.

Sala comercial na Av. Brasil — R$ 2.300/mês.

Cobertura com vista — R$ 1,2 milhão.

Kitnet perto da faculdade — R$ 1.100/mês.

Terreno 360 m² — R$ 180 mil.

<nav sw-navbar sw-navbar-mode="sticky" sw-navbar-shrink-at="30">
  <a href="/" sw-navbar-brand><span class="sw-navbar-logo"><i class="swi-home"></i></span> Imobiliária Lar</a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="/comprar">Comprar</a>
    <a sw-navbar-it href="/alugar">Alugar</a>
    <a sw-navbar-it href="/anunciar">Anunciar</a>
  </div>
  <div sw-navbar-actions><a href="/contato" sw-btn="pri p">Falar com corretor</a></div>
  <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
</nav>
<!-- na página de verdade, a barra gruda no topo da janela ao rolar -->
Loja: departamentos em mega-menu + conta + carrinho Ao vivo
<nav sw-navbar>
  <a href="/" sw-navbar-brand><i class="swi-shopping-bag"></i> Loja Bela</a>
  <div sw-navbar-mn>
    <div sw-navbar-drop-wrap>
      <a sw-navbar-it sw-navbar-drop href="#">Roupas <i class="swi-chevron-down" sw-navbar-drop-arr></i></a>
      <div sw-navbar-drop-mn wide>
        <div sw-navbar-drop-col>
          <span sw-navbar-drop-ttl>Feminino</span>
          <a sw-navbar-drop-it href="/vestidos">Vestidos</a>
          <a sw-navbar-drop-it href="/blusas">Blusas</a>
        </div>
        <div sw-navbar-drop-col>
          <span sw-navbar-drop-ttl>Masculino</span>
          <a sw-navbar-drop-it href="/camisas">Camisas</a>
          <a sw-navbar-drop-it href="/bermudas">Bermudas</a>
        </div>
      </div>
    </div>
    <a sw-navbar-it href="/ofertas">Ofertas</a>
  </div>
  <div sw-navbar-actions>
    <a href="/busca" sw-btn="ghost rnd" aria-label="Buscar"><i class="swi-search"></i></a>
    <a href="/carrinho" sw-btn="ghost rnd" aria-label="Carrinho"><i class="swi-cart"></i></a>
    <a href="/entrar" sw-btn="pri p">Entrar</a>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
</nav>
Barra presa no topo (fixed) sem cobrir o conteúdo Referência
<nav sw-navbar sw-navbar-mode="fixed">…</nav>

<main class="conteudo">…</main>

<style>
  /* a barra fixa sai do fluxo: empurre o conteúdo para baixo com a mesma altura */
  .conteudo { padding-top: var(--sw-navbar-h, 7rem); }
</style>
Fazer algo quando o menu do celular abre Referência
const barra = document.querySelector('[sw-navbar]');

barra.addEventListener('sw:navbar:toggle', (e) => {
  // e.detail.open = true (abriu) ou false (fechou)
  document.body.classList.toggle('menu-aberto', e.detail.open);
});

barra.addEventListener('sw:navbar:dropdown', (e) => {
  // um submenu abriu (e.detail.open = true) ou fechou; e.target = o link-pai
});

Eventos

sw:navbar:toggle
Disparado na <nav> quando o menu do celular abre ou fecha. e.detail.open = true/false. Também dispara ao clicar num link (o menu fecha) e quando a tela sai do modo celular.
sw:navbar:dropdown
Disparado no link-pai (sw-navbar-drop) quando um submenu abre ou fecha por clique. e.detail.open. Abrir só passando o mouse não dispara.

API (JavaScript)

SW.Navbar.initAll(raiz)
Liga as navbars [sw-navbar] dentro de raiz que ainda não foram ligadas. O núcleo já faz isso sozinho, inclusive com HTML colocado depois.

Precisa de quê

  • swcore.min.css + swcore.min.js — a barra, o ☰ e os submenus.
  • swcore.compl.min.css — só se usar ícones swi-*/swil-* (setinha, logo, redes sociais).

Cuidados — erros comuns

  • Colocar o submenu dentro do <a sw-navbar-it>: não funciona (link dentro de link é HTML inválido). O sw-navbar-drop-mn vem depois do link, os dois dentro do sw-navbar-drop-wrap.
  • Colocar sw-navbar-drop-align="right" no link: ele vai no <div sw-navbar-drop-wrap>.
  • Usar sw-navbar-drop-col sem wide no sw-navbar-drop-mn: as colunas ficam uma embaixo da outra.
  • Item com 3º nível (has-sub) feito com <a>: use <div>, porque ele contém outros links.
  • Esquecer o botão sw-navbar-tgl: no celular os links somem e não há como abrir o menu.
  • Criar à mão uma <div sw-navbar-ovl>: não precisa, a cortina escura é criada sozinha.
  • Usar sw-navbar-mode="fixed" e o topo da página sumir embaixo da barra: reserve o espaço (receita acima).

O que ele não faz

  • O mega-menu tem 2 colunas (wide); para 3 ou mais, você precisa do seu próprio CSS.
  • Não marca sozinha a página atual pela URL: você escreve act no link certo (o clique marca, mas ao recarregar a página vale o HTML).
  • Um só menu lateral por navbar; não tem busca embutida (coloque um campo nas ações).