SWCore / Componentes / Navbar

Navbar Componentes

Barra de navegação superior responsiva com variantes glass/gradiente, scroll shrink, dropdowns, mega-menu e drawer mobile.

O que é

O componente central de cabeçalho do SWCore — suporta modos static/fixed/sticky, encolhimento automático ao rolar, efeitos translúcidos de vidro, gradiente de marca, mega-menus em grid, submenus aninhados de 3º nível e gaveta mobile animada.

Como funciona

O elemento <nav sw-navbar> organiza automaticamente a marca à esquerda, os links em [sw-navbar-mn] e os botões em [sw-navbar-actions]. Em telas menores que 768px, o menu vira um drawer lateral controlado pelo botão hambúrguer [sw-navbar-tgl] e overlay escurecido com fechamento por clique fora ou tecla Esc.

Exemplos

01 · Orbit — assinatura cinética do SWCore Ao vivo 
<div class="nvb-modern-stage">
<nav sw-navbar sw-navbar-variant="orbit" aria-label="Navegação do produto">
  <a sw-navbar-brand href="#"><span sw-navbar-mark><i class="swi-flash"></i></span><span>Nexora<sup>®</sup></span></a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="#">Produto</a><a sw-navbar-it href="#">Soluções</a>
    <a sw-navbar-it href="#">Clientes</a><a sw-navbar-it href="#">Preços</a>
  </div>
  <div sw-navbar-actions>
    <span sw-navbar-status>Sistemas online</span>
    <button sw-navbar-icon aria-label="Abrir comandos"><i class="swi-search"></i></button>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
</nav></div>
02 · Floating Glass — leve, contida e atual Ao vivo 
<div class="nvb-modern-stage">
  <nav sw-navbar sw-navbar-fx="floating">
    <a sw-navbar-brand href="#"><span sw-navbar-mark>N</span><span>Northstar</span></a>
    <div sw-navbar-mn align="center">
      <a sw-navbar-it act href="#">Visão geral</a><a sw-navbar-it href="#">Recursos</a><a sw-navbar-it href="#">Empresa</a>
    </div>
    <div sw-navbar-actions><button class="sw-btn sw-btn-out sw-btn-sm">Entrar</button></div>
    <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
  </nav>
</div>
03 · Mega Menu Visual — conteúdo organizado Ao vivo 
<nav sw-navbar>
  <a sw-navbar-brand href="#"><span sw-navbar-mark><i class="swi-grid-alt"></i></span><span>Orbit</span></a>
  <div sw-navbar-mn align="center">
    <div sw-navbar-drop-wrap>
      <a sw-navbar-it sw-navbar-drop href="#">Plataforma <i sw-navbar-drop-arr class="swi-chevron-down"></i></a>
      <div sw-navbar-drop-mn wide cols="3">
        <a sw-navbar-drop-it href="#"><span><b>Automação</b><small sw-navbar-drop-desc>Fluxos que trabalham por você.</small></span></a>
        <a sw-navbar-drop-it href="#"><span><b>Analytics</b><small sw-navbar-drop-desc>Decisões com contexto real.</small></span></a>
        <a sw-navbar-drop-it href="#"><span><b>Colaboração</b><small sw-navbar-drop-desc>Equipes no mesmo ritmo.</small></span></a>
        <div sw-navbar-feature><small>NOVO</small><strong>Conheça o Orbit AI</strong></div>
      </div>
    </div>
    <a sw-navbar-it href="#">Clientes</a><a sw-navbar-it href="#">Preços</a>
  </div>
  <div sw-navbar-actions><button class="sw-btn sw-btn-pri sw-btn-sm">Testar agora</button></div>
  <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
</nav>
04 · Dashboard Topbar — ações e perfil Ao vivo 
<nav sw-navbar>
  <a sw-navbar-brand href="#"><span sw-navbar-mark><i class="swi-box"></i></span><span>Console</span></a>
  <div sw-navbar-mn><a sw-navbar-it act href="#">Visão geral</a><a sw-navbar-it href="#">Projetos</a></div>
  <div sw-navbar-actions>
    <button sw-navbar-icon aria-label="Busca global"><i class="swi-search"></i></button>
    <button sw-navbar-icon aria-label="Notificações"><i class="swi-bell"></i></button>
    <button class="sw-btn sw-btn-gst sw-btn-sm">SM&nbsp; Sandro</button>
  </div>
  <button sw-navbar-tgl aria-label="Abrir menu"><span></span><span></span><span></span></button>
</nav>
01 · Navbar Básica Institucional (Mode Static) Ao vivo 
<nav sw-navbar sw-navbar-mode="static">
  <a sw-navbar-brand href="#" style="gap:0.6rem;">
    <span style="display:inline-flex; width:1.5rem; height:1.5rem; align-items:center;">
      <img class="docs-logo-day" src="../../assets/images/logo_day.png" alt="SWCore" style="width:100%; height:100%; object-fit:contain;">
      <img class="docs-logo-night" src="../../assets/images/logo_night.png" alt="SWCore" style="width:100%; height:100%; object-fit:contain;">
    </span>
    <span>SWCore</span>
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Soluções</a>
    <a sw-navbar-it href="#">Preços</a>
    <a sw-navbar-it href="#">Sobre Nós</a>
    <a sw-navbar-it href="#">Contato</a>
  </div>
  <div sw-navbar-actions>
    <button class="sw-btn sw-btn-pri sw-btn-sm">Começar Grátis</button>
  </div>
  <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
</nav>
02 · Navbar com Efeito Glassmorphism (Glass) Ao vivo 
<div style="background:linear-gradient(135deg, rgba(56,189,248,0.15), rgba(168,85,247,0.15)); padding:1rem;">
  <nav sw-navbar sw-navbar-fx="glass" style="border:1px solid rgba(255,255,255,0.15);">
    <a sw-navbar-brand href="#">
      <span class="swi swi-shield-check" style="font-size:1.2rem; color:var(--color-primary);"></span>
      <span>GlassBrand</span>
    </a>
    <div sw-navbar-mn>
      <a sw-navbar-it act href="#">Visão Geral</a>
      <a sw-navbar-it href="#">Recursos</a>
      <a sw-navbar-it href="#">Integrações</a>
      <a sw-navbar-it href="#">Segurança</a>
    </div>
    <div sw-navbar-actions>
      <button class="sw-btn sw-btn-out sw-btn-sm">Entrar</button>
      <button class="sw-btn sw-btn-pri sw-btn-sm">Criar Conta</button>
    </div>
    <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
03 · Navbar com Encolhimento ao Rolar (Scroll Shrink) Ao vivo

Role este quadro para baixo para ver a Navbar encolher de 4rem (64px) para 3.25rem (52px).

Conteúdo rolando...
Conteúdo rolando...
<div class="nvb-stage" style="height:16rem; overflow-y:auto; position:relative; border:1px solid var(--border);">
  <nav sw-navbar sw-navbar-mode="sticky" sw-navbar-shrink-at="30" style="--sw-navbar-h:4rem; --sw-navbar-h-shrink:3.25rem;">
    <a sw-navbar-brand href="#">
      <span class="swi swi-layers" style="font-size:1.2rem; color:var(--color-primary);"></span>
      <span>ShrinkNav</span>
    </a>
    <div sw-navbar-mn>
      <a sw-navbar-it act href="#">Dashboard</a>
      <a sw-navbar-it href="#">Projetos</a>
      <a sw-navbar-it href="#">Relatórios</a>
    </div>
    <div sw-navbar-actions>
      <span class="sw-badge sw-badge-pri">v2.0</span>
    </div>
    <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
  <div style="padding:1.5rem; height:35rem; color:var(--text-muted);">
    <p><strong>Role este quadro para baixo</strong> para ver a Navbar encolher de <code>4rem</code> (64px) para <code>3.25rem</code> (52px).</p>
    <div style="background:var(--surface-hover); height:7rem; margin-top:1rem; display:grid; place-items:center;">Conteúdo rolando...</div>
    <div style="background:var(--surface-hover); height:7rem; margin-top:1rem; display:grid; place-items:center;">Conteúdo rolando...</div>
  </div>
</div>
04 · Navbar com Gradiente de Marca (Grad) Ao vivo 
<nav sw-navbar sw-navbar-fx="grad">
  <a sw-navbar-brand href="#">
    <span class="swi swi-zap" style="font-size:1.2rem; color:var(--color-primary);"></span>
    <span>UltraSpeed</span>
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">Performance</a>
    <a sw-navbar-it href="#">Infraestrutura</a>
    <a sw-navbar-it href="#">Edge CDN</a>
    <a sw-navbar-it href="#">Benchmarks</a>
  </div>
  <div sw-navbar-actions>
    <button class="sw-btn sw-btn-pri sw-btn-sm">Acessar Console</button>
  </div>
  <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
</nav>
05 · Navbar com Dropdown Simples & Descrições Ao vivo 
<nav sw-navbar>
  <a sw-navbar-brand href="#">
    <span class="swi swi-box" style="font-size:1.2rem; color:var(--color-primary);"></span>
    <span>DevCorp</span>
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">Home</a>
    <div sw-navbar-drop-wrap>
      <a sw-navbar-it sw-navbar-drop href="#">Serviços <i class="swi swi-chevron-down" sw-navbar-drop-arr></i></a>
      <div sw-navbar-drop-mn>
        <span sw-navbar-drop-ttl>Desenvolvimento</span>
        <a sw-navbar-drop-it href="#">
          <strong>Aplicações Web</strong>
          <span sw-navbar-drop-desc>Sistemas sob medida em PHP & SWMVC</span>
        </a>
        <a sw-navbar-drop-it href="#">
          <strong>APIs REST & GraphQL</strong>
          <span sw-navbar-drop-desc>Microsserviços de alta escala</span>
        </a>
        <div sw-navbar-drop-sep></div>
        <span sw-navbar-drop-ttl>Cloud & DevOps</span>
        <a sw-navbar-drop-it href="#">
          <strong>Hospedagem VPS</strong>
          <span sw-navbar-drop-desc>Containers Docker & proxy reverso</span>
        </a>
      </div>
    </div>
    <a sw-navbar-it href="#">Cases</a>
    <a sw-navbar-it href="#">Blog</a>
  </div>
  <div sw-navbar-actions>
    <button class="sw-btn sw-btn-out sw-btn-sm">Orçamento</button>
  </div>
  <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
</nav>
06 · Navbar com Mega-Menu em Grade de 2 Colunas (Wide) Ao vivo 
<nav sw-navbar>
  <a sw-navbar-brand href="#">
    <span class="swi swi-cpu" style="font-size:1.2rem; color:var(--color-primary);"></span>
    <span>PlatformX</span>
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it href="#">Início</a>
    <div sw-navbar-drop-wrap>
      <a sw-navbar-it sw-navbar-drop act href="#">Produtos <i class="swi swi-chevron-down" sw-navbar-drop-arr></i></a>
      <div sw-navbar-drop-mn wide>
        <div>
          <span sw-navbar-drop-ttl>Inteligência Artificial</span>
          <a sw-navbar-drop-it href="#">
            <span style="display:flex; align-items:center; gap:0.4rem;"><strong>Agentes Autônomos</strong> <span class="sw-badge sw-badge-pri" style="font-size:0.65rem;">Novo</span></span>
            <span sw-navbar-drop-desc>Orquestração com LLMs locais</span>
          </a>
          <a sw-navbar-drop-it href="#">
            <strong>Processamento de Voz</strong>
            <span sw-navbar-drop-desc>Transcrição e síntese em tempo real</span>
          </a>
        </div>
        <div>
          <span sw-navbar-drop-ttl>Banco de Dados & Memória</span>
          <a sw-navbar-drop-it href="#">
            <strong>Vector Search</strong>
            <span sw-navbar-drop-desc>Embeddings e busca semântica</span>
          </a>
          <a sw-navbar-drop-it href="#">
            <strong>Memória em Camadas</strong>
            <span sw-navbar-drop-desc>Cache contínuo ultrarrápido</span>
          </a>
        </div>
      </div>
    </div>
    <a sw-navbar-it href="#">Documentação</a>
    <a sw-navbar-it href="#">Planos</a>
  </div>
  <div sw-navbar-actions>
    <button class="sw-btn sw-btn-pri sw-btn-sm">Experimentar</button>
  </div>
  <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
</nav>
07 · Navbar com Submenu & Sub-Submenu em Cascata (Níveis 3 e 4) Ao vivo 
<nav sw-navbar>
  <a sw-navbar-brand href="#">
    <span class="swi swi-folder" style="font-size:1.2rem; color:var(--color-primary);"></span>
    <span>Arquitetura</span>
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#">Geral</a>
    <div sw-navbar-drop-wrap>
      <a sw-navbar-it sw-navbar-drop href="#">Módulos <i class="swi swi-chevron-down" sw-navbar-drop-arr></i></a>
      <div sw-navbar-drop-mn>
        <span sw-navbar-drop-ttl>Estrutura</span>
        <a sw-navbar-drop-it href="#">Core Orchestrator</a>
        
        <!-- Nível 3 (Submenu) -->
        <div sw-navbar-drop-it has-sub>
          <div style="display:flex; justify-content:space-between; align-items:center; width:100%;">
            <span>Camada Frontend</span>
            <i class="swi swi-chevron-right" sw-navbar-sub-arr></i>
          </div>
          <div sw-navbar-drop-sub>
            <!-- Nível 4 (Sub-Submenu) -->
            <div sw-navbar-drop-it has-sub>
              <div style="display:flex; justify-content:space-between; align-items:center; width:100%;">
                <span>Design System</span>
                <i class="swi swi-chevron-right" sw-navbar-sub-arr></i>
              </div>
              <div sw-navbar-drop-sub>
                <a sw-navbar-drop-it href="#">Paletas HSL & Tokens</a>
                <a sw-navbar-drop-it href="#">Tipografia Fluida</a>
                <a sw-navbar-drop-it href="#">Sombras & Elevações</a>
              </div>
            </div>
            <a sw-navbar-drop-it href="#">Componentes UI</a>
            <a sw-navbar-drop-it href="#">Micro-animações</a>
          </div>
        </div>
        
        <a sw-navbar-drop-it href="#">Motor de Memória</a>
      </div>
    </div>
    <a sw-navbar-it href="#">Configurações</a>
  </div>
  <div sw-navbar-actions>
    <button class="sw-btn sw-btn-out sw-btn-sm">Status</button>
  </div>
  <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
</nav>
08 · Navbar com Links Centralizados (Align Center) Ao vivo 
<nav sw-navbar>
  <a sw-navbar-brand href="#">
    <span class="swi swi-compass" style="font-size:1.2rem; color:var(--color-primary);"></span>
    <span>Horizon</span>
  </a>
  <div sw-navbar-mn align="center">
    <a sw-navbar-it act href="#">Início</a>
    <a sw-navbar-it href="#">Sobre</a>
    <a sw-navbar-it href="#">Portfólio</a>
    <a sw-navbar-it href="#">Parceiros</a>
    <a sw-navbar-it href="#">Carreiras</a>
  </div>
  <div sw-navbar-actions>
    <button class="sw-btn sw-btn-pri sw-btn-sm">Fale Conosco</button>
  </div>
  <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
</nav>
09 · Navbar E-commerce com Topbar & Carrinho Ao vivo
⚡ Frete Grátis para todo o Brasil em compras acima de R$ 199 Suporte: (11) 99999-9999 
<div style="border:1px solid var(--border);">
  <!-- Topbar de Avisos -->
  <div style="background:var(--color-primary); color:#ffffff; font-size:0.75rem; font-weight:700; padding:0.35rem 1rem; display:flex; justify-content:space-between; align-items:center;">
    <span>⚡ Frete Grátis para todo o Brasil em compras acima de R$ 199</span>
    <span style="opacity:0.85;">Suporte: (11) 99999-9999</span>
  </div>
  <!-- Navbar Principal -->
  <nav sw-navbar style="border-bottom:0;">
    <a sw-navbar-brand href="#">
      <span class="swi swi-shopping-bag" style="font-size:1.2rem; color:var(--color-primary);"></span>
      <span>MegaStore</span>
    </a>
    <div sw-navbar-mn>
      <a sw-navbar-it act href="#">Lançamentos</a>
      <a sw-navbar-it href="#">Masculino</a>
      <a sw-navbar-it href="#">Feminino</a>
      <a sw-navbar-it href="#" style="color:#ef4444; font-weight:700;">Outlet %</a>
    </div>
    <div sw-navbar-actions>
      <div style="position:relative; display:inline-flex; align-items:center; cursor:pointer;">
        <span class="swi swi-shopping-cart" style="font-size:1.3rem; color:var(--text);"></span>
        <span style="position:absolute; top:-0.4rem; right:-0.5rem; background:#ef4444; color:#fff; font-size:0.65rem; font-weight:800; padding:0.1rem 0.35rem; line-height:1;">3</span>
      </div>
      <button class="sw-btn sw-btn-pri sw-btn-sm">Minha Conta</button>
    </div>
    <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
10 · Navbar Floating Bar (Ilha Flutuante) Ao vivo 
<div style="background:var(--surface-hover); padding:1.5rem; border:1px solid var(--border);">
  <nav sw-navbar sw-navbar-fx="glass" style="border:1px solid var(--border); box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);">
    <a sw-navbar-brand href="#">
      <span class="swi swi-sparkles" style="font-size:1.2rem; color:var(--color-primary);"></span>
      <span>AeroUI</span>
    </a>
    <div sw-navbar-mn>
      <a sw-navbar-it act href="#">Explore</a>
      <a sw-navbar-it href="#">Showcase</a>
      <a sw-navbar-it href="#">Templates</a>
      <a sw-navbar-it href="#">Docs</a>
    </div>
    <div sw-navbar-actions>
      <button class="sw-btn sw-btn-pri sw-btn-sm">Download</button>
    </div>
    <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
11 · Navbar Minimalista / Dark Mode Editorial Ao vivo 
<nav sw-navbar style="background:#090d16; border-color:rgba(255,255,255,0.1); color:#ffffff;">
  <a sw-navbar-brand href="#" style="color:#ffffff; font-family:var(--mono); letter-spacing:0.1em; text-transform:uppercase;">
    <span>Studio.26</span>
  </a>
  <div sw-navbar-mn>
    <a sw-navbar-it act href="#" style="color:#ffffff; font-family:var(--mono);">[01] Trabalhos</a>
    <a sw-navbar-it href="#" style="color:rgba(255,255,255,0.6); font-family:var(--mono);">[02] Manifesto</a>
    <a sw-navbar-it href="#" style="color:rgba(255,255,255,0.6); font-family:var(--mono);">[03] Imprensa</a>
  </div>
  <div sw-navbar-actions>
    <button class="sw-btn sw-btn-sm" style="background:transparent; border:1px solid rgba(255,255,255,0.3); color:#fff; font-family:var(--mono);">PT / EN</button>
  </div>
  <button sw-navbar-tgl aria-label="Menu"><span style="background:#fff;"></span><span style="background:#fff;"></span><span style="background:#fff;"></span></button>
</nav>
12 · Opções de Gaveta Mobile (Direita, Esquerda e Topo) Ao vivo
1. Mobile Direita (Padrão: sw-navbar-mobile="right")
2. Mobile Esquerda (sw-navbar-mobile="left")
3. Mobile Topo (sw-navbar-mobile="top")
<div style="display:flex; flex-direction:column; gap:1.25rem;">
  <!-- Opção A: Direita (Padrão) -->
  <div class="nvb-mobile-sim" style="background:var(--surface-hover); border:1px solid var(--border); padding:0.75rem;">
    <div style="font-size:0.75rem; font-weight:700; color:var(--text-muted); margin-bottom:0.4rem; text-transform:uppercase;">1. Mobile Direita (Padrão: sw-navbar-mobile="right")</div>
    <nav sw-navbar sw-navbar-mobile="right" style="border:1px solid var(--border);">
      <a sw-navbar-brand href="#"><span>RightDrawer</span></a>
      <div sw-navbar-mn>
        <a sw-navbar-it act href="#">Painel</a>
        <a sw-navbar-it href="#">Clientes</a>
        <a sw-navbar-it href="#">Vendas</a>
      </div>
      <div sw-navbar-actions><span class="sw-badge sw-badge-pri">Right</span></div>
      <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
    </nav>
  </div>

  <!-- Opção B: Esquerda -->
  <div class="nvb-mobile-sim" style="background:var(--surface-hover); border:1px solid var(--border); padding:0.75rem;">
    <div style="font-size:0.75rem; font-weight:700; color:var(--text-muted); margin-bottom:0.4rem; text-transform:uppercase;">2. Mobile Esquerda (sw-navbar-mobile="left")</div>
    <nav sw-navbar sw-navbar-mobile="left" style="border:1px solid var(--border);">
      <a sw-navbar-brand href="#"><span>LeftDrawer</span></a>
      <div sw-navbar-mn>
        <a sw-navbar-it act href="#">Início</a>
        <a sw-navbar-it href="#">Projetos</a>
        <a sw-navbar-it href="#">Configurações</a>
      </div>
      <div sw-navbar-actions><span class="sw-badge sw-badge-sec">Left</span></div>
      <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
    </nav>
  </div>

  <!-- Opção C: Topo (Expansível) -->
  <div class="nvb-mobile-sim" style="background:var(--surface-hover); border:1px solid var(--border); padding:0.75rem;">
    <div style="font-size:0.75rem; font-weight:700; color:var(--text-muted); margin-bottom:0.4rem; text-transform:uppercase;">3. Mobile Topo (sw-navbar-mobile="top")</div>
    <nav sw-navbar sw-navbar-mobile="top" style="border:1px solid var(--border);">
      <a sw-navbar-brand href="#"><span>TopDrawer</span></a>
      <div sw-navbar-mn>
        <a sw-navbar-it act href="#">Visão Geral</a>
        <a sw-navbar-it href="#">Recursos</a>
        <a sw-navbar-it href="#">Suporte</a>
      </div>
      <div sw-navbar-actions><span class="sw-badge sw-badge-suc">Top</span></div>
      <button sw-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
    </nav>
  </div>
</div>
13 · Basement 01: Utilidade + Logo Central + Links com Separador (Pipe) Ao vivo
Brasil (BRL)
Atendimento Rastrear Pedido 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid var(--border);">
  <div sw2-navbar-util>
    <div sw2-navbar-util-grp>
      <i class="swi swi-map-pin"></i> <span sw2-navbar-util-lnk>Brasil (BRL)</span>
    </div>
    <div sw2-navbar-util-grp>
      <span sw2-navbar-util-lnk>Atendimento</span>
      <span sw2-navbar-util-lnk>Rastrear Pedido</span>
    </div>
  </div>
  <nav sw2-navbar>
    <div style="flex:1"></div>
    <a href="#" sw2-navbar-brd><span class="sw2-mark"></span> Basement</a>
    <div sw2-navbar-actions style="flex:1; justify-content:flex-end;">
      <i class="swi swi-search" sw2-navbar-ico></i>
      <i class="swi swi-user" sw2-navbar-ico></i>
      <i class="swi swi-shopping-cart" sw2-navbar-ico></i>
    </div>
    <div sw2-navbar-mn sep="pipe" align="center" style="flex-basis:100%; justify-content:center; padding:0.5rem 0;">
      <a sw2-navbar-it act href="#">Novidades</a>
      <a sw2-navbar-it href="#">Coleção de Verão</a>
      <a sw2-navbar-it href="#">Masculino</a>
      <a sw2-navbar-it href="#">Feminino</a>
      <a sw2-navbar-it href="#">Acessórios</a>
      <a sw2-navbar-it href="#">Outlet</a>
    </div>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
14 · Basement 02: Simples com Logo, Links à Direita e Busca Ao vivo 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid var(--border);">
  <nav sw2-navbar>
    <a href="#" sw2-navbar-brd><span class="sw2-mark"></span> Basement</a>
    <div sw2-navbar-mn align="end">
      <a sw2-navbar-it act href="#">Início</a>
      <a sw2-navbar-it href="#">Produtos</a>
      <a sw2-navbar-it href="#">Sobre Nós</a>
      <a sw2-navbar-it href="#">Contato</a>
    </div>
    <div sw2-navbar-actions>
      <i class="swi swi-search" sw2-navbar-ico></i>
    </div>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
15 · Basement 03: Mínima com Marca e Botão de Carrinho Ao vivo 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid var(--border);">
  <nav sw2-navbar>
    <span class="sw2-mark"></span>
    <div style="flex:1"></div>
    <button class="sw-btn sw-btn-pri sw-btn-sm" style="display:inline-flex; align-items:center; gap:0.5rem;">
      <i class="swi swi-shopping-cart"></i> Carrinho (2)
    </button>
  </nav>
</div>
16 · Basement 04: Dropdowns Múltiplos com Ações e Badge Numérico Ao vivo 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid var(--border);">
  <nav sw2-navbar>
    <span class="sw2-mark"></span>
    <div sw2-navbar-mn>
      <div sw2-navbar-drop-wrap>
        <a sw2-navbar-it sw2-navbar-drop href="#">Camisas <i sw2-navbar-it-arr class="swi swi-chevron-down"></i></a>
        <div sw2-navbar-drop-mn>
          <a sw2-navbar-drop-it href="#">Camisas Sociais</a>
          <a sw2-navbar-drop-it href="#">Camisetas Básicas</a>
          <a sw2-navbar-drop-it href="#">Polos Premium</a>
        </div>
      </div>
      <div sw2-navbar-drop-wrap>
        <a sw2-navbar-it sw2-navbar-drop href="#">Calças <i sw2-navbar-it-arr class="swi swi-chevron-down"></i></a>
        <div sw2-navbar-drop-mn>
          <a sw2-navbar-drop-it href="#">Jeans Slim</a>
          <a sw2-navbar-drop-it href="#">Chino Casual</a>
          <a sw2-navbar-drop-it href="#">Alfaiataria</a>
        </div>
      </div>
      <div sw2-navbar-drop-wrap>
        <a sw2-navbar-it sw2-navbar-drop href="#">Calçados <i sw2-navbar-it-arr class="swi swi-chevron-down"></i></a>
        <div sw2-navbar-drop-mn>
          <a sw2-navbar-drop-it href="#">Sneakers Urbanos</a>
          <a sw2-navbar-drop-it href="#">Mocassins Couro</a>
          <a sw2-navbar-drop-it href="#">Botas Clássicas</a>
        </div>
      </div>
    </div>
    <div sw2-navbar-actions>
      <i class="swi swi-user" sw2-navbar-ico></i>
      <span style="position:relative; display:inline-flex;">
        <i class="swi swi-shopping-cart" sw2-navbar-ico></i>
        <span sw2-navbar-badge>4</span>
      </span>
      <i class="swi swi-search" sw2-navbar-ico></i>
    </div>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
17 · Basement 05: Compacta Escura (Mobile-first) Ao vivo 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid rgba(255,255,255,0.1);">
  <nav sw2-navbar is-dark is-compact>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
    <div style="flex:1; text-align:center; font-weight:800; font-size:1.1rem; letter-spacing:0.05em;">BASEMENT STUDIO</div>
    <span style="position:relative; display:inline-flex;">
      <i class="swi swi-shopping-cart" sw2-navbar-ico></i>
      <span sw2-navbar-badge>4</span>
    </span>
  </nav>
</div>
18 · Basement 06: Painel-Carrossel de Categorias Interativo Ao vivo
Calçados & Tênis Modelos exclusivos para estilo urbano e esportivo de alto desempenho.
Jaquetas & Casacos Proteção térmica e tecidos impermeáveis com design premium.
Relógios & Óculos Acessórios sofisticados para complementar qualquer visual.
Ofertas da Semana Até 50% de desconto em itens selecionados por tempo limitado. 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid rgba(255,255,255,0.1);">
  <nav sw2-navbar is-dark is-compact>
    <button sw2-navbar-tgl is-accent aria-label="Menu"><span></span><span></span><span></span></button>
    <div style="flex:1; font-weight:700; padding-left:0.5rem;">Explore as Categorias</div>
    <i class="swi swi-shopping-cart" sw2-navbar-ico></i>
  </nav>
  <div sw2-navbar-panel>
    <button sw2-navbar-panel-arr><i class="swi swi-chevron-left"></i></button>
    <div sw2-navbar-panel-cards>
      <div sw2-navbar-cat-card>
        <div sw2-navbar-cat-img><i class="swi swi-shopping-bag"></i></div>
        <span sw2-navbar-cat-ttl>Calçados & Tênis</span>
        <span sw2-navbar-cat-desc>Modelos exclusivos para estilo urbano e esportivo de alto desempenho.</span>
      </div>
      <div sw2-navbar-cat-card>
        <div sw2-navbar-cat-img><i class="swi swi-shield-check"></i></div>
        <span sw2-navbar-cat-ttl>Jaquetas & Casacos</span>
        <span sw2-navbar-cat-desc>Proteção térmica e tecidos impermeáveis com design premium.</span>
      </div>
      <div sw2-navbar-cat-card>
        <div sw2-navbar-cat-img><i class="swi swi-watch"></i></div>
        <span sw2-navbar-cat-ttl>Relógios & Óculos</span>
        <span sw2-navbar-cat-desc>Acessórios sofisticados para complementar qualquer visual.</span>
      </div>
      <div sw2-navbar-cat-card>
        <div sw2-navbar-cat-img><i class="swi swi-tag"></i></div>
        <span sw2-navbar-cat-ttl>Ofertas da Semana</span>
        <span sw2-navbar-cat-desc>Até 50% de desconto em itens selecionados por tempo limitado.</span>
      </div>
    </div>
    <button sw2-navbar-panel-arr><i class="swi swi-chevron-right"></i></button>
  </div>
</div>
19 · Basement 07: Hero Full-Screen com Sidebar Sólida e Conteúdo Ao vivo

Nova Coleção 2026

Linhas puras, alfaiataria contemporânea e materiais nobres para transformar sua presença visual.

<div class="bmt-frame" sw2-navbar-root style="border:1px solid rgba(255,255,255,0.1);">
  <div sw2-navbar-hero>
    <div sw2-navbar-hero-side>
      <a href="#" sw2-navbar-brd><span class="sw2-mark"></span> Basement</a>
      <div sw2-navbar-hero-links>
        <a href="#">Lançamentos</a>
        <a href="#">Masculino</a>
        <a href="#">Feminino</a>
        <a href="#">Infantil</a>
        <a href="#">Editorial</a>
      </div>
    </div>
    <div sw2-navbar-hero-cnt>
      <div sw2-navbar-hero-top>
        <span sw2-navbar-hero-user><i class="swi swi-user"></i></span>
        <button class="sw-btn sw-btn-sm" style="border:1px solid rgba(255,255,255,0.3); background:transparent; color:#fff;">
          <i class="swi swi-shopping-cart"></i> Carrinho
        </button>
      </div>
      <h2>Nova Coleção 2026</h2>
      <p>Linhas puras, alfaiataria contemporânea e materiais nobres para transformar sua presença visual.</p>
      <div sw2-navbar-hero-dots><span></span><span is-act></span><span></span></div>
    </div>
  </div>
</div>
20 · Basement 08: Utilidade Escura com Links de Apoio e Login/Register Ao vivo
Entrega Rápida Pagamento Seguro Blog Fale Conosco
Favoritos Conta 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid rgba(255,255,255,0.1);">
  <div sw2-navbar-util is-dark>
    <div sw2-navbar-util-grp>
      <span sw2-navbar-util-lnk>Entrega Rápida</span>
      <span sw2-navbar-util-lnk>Pagamento Seguro</span>
      <span sw2-navbar-util-lnk>Blog</span>
      <span sw2-navbar-util-lnk>Fale Conosco</span>
    </div>
    <div sw2-navbar-util-grp>
      <i class="swi swi-search"></i>
      <span sw2-navbar-util-lnk><i class="swi swi-heart"></i> Favoritos</span>
      <span sw2-navbar-util-lnk><i class="swi swi-user"></i> Conta</span>
    </div>
  </div>
  <nav sw2-navbar is-dark>
    <a href="#" sw2-navbar-brd>Basement</a>
    <div sw2-navbar-mn>
      <a sw2-navbar-it act href="#">Home</a>
      <a sw2-navbar-it href="#">Roupas</a>
      <a sw2-navbar-it href="#">Calçados</a>
      <a sw2-navbar-it href="#">Acessórios</a>
      <a sw2-navbar-it href="#">Sustentável</a>
    </div>
    <div sw2-navbar-actions>
      <span sw2-navbar-util-lnk style="font-size:0.85rem;">Login / Criar Conta</span>
      <span style="position:relative; display:inline-flex;">
        <i class="swi swi-shopping-cart" sw2-navbar-ico></i>
        <span sw2-navbar-badge>4</span>
      </span>
    </div>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
21 · Basement 09: Utilidade Centralizada + Busca + Logo Central Ao vivo
Frete Grátis acima de R$ 250 • Troca Grátis em até 30 dias • Parcele em até 10x sem juros 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid var(--border);">
  <div sw2-navbar-util is-dark style="justify-content:center;">
    <div sw2-navbar-util-grp>
      <span sw2-navbar-util-lnk>Frete Grátis acima de R$ 250</span>
      <span>•</span>
      <span sw2-navbar-util-lnk>Troca Grátis em até 30 dias</span>
      <span>•</span>
      <span sw2-navbar-util-lnk>Parcele em até 10x sem juros</span>
    </div>
  </div>
  <nav sw2-navbar>
    <i class="swi swi-search" sw2-navbar-ico></i>
    <div style="flex:1"></div>
    <a href="#" sw2-navbar-brd><span class="sw2-mark"></span> Basement</a>
    <div style="flex:1; display:flex; justify-content:flex-end;">
      <i class="swi swi-shopping-cart" sw2-navbar-ico></i>
    </div>
    <div sw2-navbar-mn align="center" style="flex-basis:100%; padding:0.4rem 0; border-top:1px solid var(--border);">
      <a sw2-navbar-it act href="#">Destaques</a>
      <a sw2-navbar-it href="#">Vestuário</a>
      <a sw2-navbar-it href="#">Sneakers</a>
      <a sw2-navbar-it href="#">Bolsas</a>
      <a sw2-navbar-it href="#">Relógios</a>
      <a sw2-navbar-it href="#">Marcas</a>
    </div>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
22 · Basement 10: Completa com Utilidade em 3 Blocos + Mega Menu de 4 Colunas Ao vivo
Idioma: PT-BR Nossas Lojas
(11) 3333-4444 • suporte@basement.com
Entregas Devoluções FAQ 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid var(--border); overflow:visible;">
  <div sw2-navbar-util is-dark>
    <div sw2-navbar-util-grp>
      <span sw2-navbar-util-lnk>Idioma: PT-BR <i class="swi swi-chevron-down"></i></span>
      <span sw2-navbar-util-lnk>Nossas Lojas</span>
    </div>
    <div sw2-navbar-util-grp>
      <span>(11) 3333-4444</span>
      <span>•</span>
      <span>suporte@basement.com</span>
    </div>
    <div sw2-navbar-util-grp>
      <span sw2-navbar-util-lnk>Entregas</span>
      <span sw2-navbar-util-lnk>Devoluções</span>
      <span sw2-navbar-util-lnk>FAQ</span>
    </div>
  </div>
  <nav sw2-navbar>
    <a href="#" sw2-navbar-brd><span class="sw2-mark"></span> Basement</a>
    <div sw2-navbar-search-box>
      <input type="text" placeholder="O que você está procurando hoje?">
      <i class="swi swi-search"></i>
    </div>
    <div sw2-navbar-actions>
      <i class="swi swi-user" sw2-navbar-ico></i>
      <i class="swi swi-shopping-cart" sw2-navbar-ico></i>
    </div>
  </nav>
  <nav sw2-navbar is-compact style="border-top:1px solid var(--border);">
    <div sw2-navbar-mn underline>
      <div sw2-navbar-drop-wrap>
        <a sw2-navbar-it sw2-navbar-drop act href="#">Masculino <i sw2-navbar-it-arr class="swi swi-chevron-down"></i></a>
        <div sw2-navbar-drop-mn cols="4">
          <div>
            <span sw2-navbar-drop-col-ttl>Roupas</span>
            <a sw2-navbar-drop-it href="#">Camisas & Polos</a>
            <a sw2-navbar-drop-it href="#">Jaquetas & Blazers</a>
            <a sw2-navbar-drop-it href="#">Bermudas & Shorts</a>
          </div>
          <div>
            <span sw2-navbar-drop-col-ttl>Calçados</span>
            <a sw2-navbar-drop-it href="#">Tênis Urbanos</a>
            <a sw2-navbar-drop-it href="#">Sapatos Sociais</a>
            <a sw2-navbar-drop-it href="#">Sandálias & Chinelos</a>
          </div>
          <div>
            <span sw2-navbar-drop-col-ttl>Acessórios</span>
            <a sw2-navbar-drop-it href="#">Cintos em Couro</a>
            <a sw2-navbar-drop-it href="#">Carteiras & Mochilas</a>
            <a sw2-navbar-drop-it href="#">Bonés & Gorros</a>
          </div>
          <div>
            <span sw2-navbar-drop-col-ttl>Coleções</span>
            <a sw2-navbar-drop-it href="#">Edição Limitada 2026</a>
            <a sw2-navbar-drop-it href="#">Alfaiataria Moderna</a>
            <a sw2-navbar-drop-it href="#">Linha Techwear</a>
          </div>
        </div>
      </div>
      <a sw2-navbar-it href="#">Feminino</a>
      <a sw2-navbar-it href="#">Infantil</a>
      <a sw2-navbar-it href="#">Esportes</a>
      <a sw2-navbar-it href="#">Marcas Exclusivas</a>
      <a sw2-navbar-it href="#" style="color:#ef4444;">Outlet %</a>
    </div>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>
23 · Basement 11: Busca Central + Botões de Ação + Links Escuros Ao vivo 
<div class="bmt-frame" sw2-navbar-root style="border:1px solid var(--border);">
  <nav sw2-navbar>
    <a href="#" sw2-navbar-brd><span class="sw2-mark"></span> Basement</a>
    <div sw2-navbar-search-box>
      <input type="text" placeholder="Buscar produtos, marcas e categorias...">
      <i class="swi swi-search"></i>
    </div>
    <div sw2-navbar-actions>
      <span style="font-size:0.85rem; color:var(--text-muted); display:flex; align-items:center; gap:0.4rem;">
        <i class="swi swi-help-circle"></i> Ajuda?
      </span>
      <button class="sw-btn sw-btn-pri sw-btn-sm" style="display:inline-flex; align-items:center; gap:0.4rem;">
        <i class="swi swi-shopping-cart"></i> Carrinho
      </button>
      <button class="sw-btn sw-btn-out sw-btn-sm">Entrar</button>
    </div>
  </nav>
  <nav sw2-navbar is-dark is-compact>
    <div sw2-navbar-mn align="center">
      <a sw2-navbar-it act href="#">Início</a>
      <a sw2-navbar-it href="#">Masculino</a>
      <a sw2-navbar-it href="#">Feminino</a>
      <a sw2-navbar-it href="#">Acessórios</a>
      <a sw2-navbar-it href="#">Lançamentos</a>
      <a sw2-navbar-it href="#">Editorial</a>
      <a sw2-navbar-it href="#">Contato</a>
    </div>
    <button sw2-navbar-tgl aria-label="Menu"><span></span><span></span><span></span></button>
  </nav>
</div>

Atributos

sw-navbar-mode="static"
no nav — modo padrão no fluxo normal da página
sw-navbar-mode="fixed"
no nav — fixa a barra no topo da janela (position: fixed)
sw-navbar-mode="sticky"
no nav — adere ao topo da janela ao rolar a página (position: sticky)
sw-navbar-fx="glass"
no nav — aplica fundo translúcido com backdrop-blur
sw-navbar-fx="grad"
no nav — aplica gradiente suave da cor primária da marca
sw-navbar-fx="floating"
barra flutuante, translúcida e contida em até 84rem
sw-navbar-fx="overlay"
começa transparente sobre o hero e ganha superfície após o scroll
sw-navbar-autohide
oculta ao rolar para baixo e retorna ao rolar para cima
sw-navbar-shrink-at="40"
no nav — pixels de rolagem necessários para ativar a classe/atributo [scrolled] (padrão 40)
--sw-navbar-h
no nav (style="") — altura padrão da barra (ex: 4.5rem ou 5rem)
--sw-navbar-h-shrink
no nav (style="") — altura compacta quando [scrolled] está ativo (ex: 3.5rem)
[scrolled]
no nav — injetado dinamicamente pelo JS ao rolar acima do limiar
[open]
no nav — injetado dinamicamente quando o drawer mobile está aberto
sw-navbar-brand
no link/logo — container da marca à esquerda
sw-navbar-mn
no container dos links — vira drawer deslizante no mobile
align="center" | "end"
em [sw-navbar-mn] — centraliza ou alinha os links à direita
sw-navbar-it
no link individual — item de navegação
[act]
em [sw-navbar-it] — destaca o item como página/seção ativa
sw-navbar-mobile="right|left|top"
no nav — define a direção do menu no mobile (padrão right, desliza da direita; left, desliza da esquerda; top, expande pelo topo)
sw-navbar-drop-wrap
no elemento pai — container isolado do gatilho e menu suspenso
sw-navbar-drop
em [sw-navbar-it] — gatilho com seta giratória [sw-navbar-drop-arr]
sw-navbar-drop-mn
no container suspenso — menu dropdown com sombra e borda
[wide]
em [sw-navbar-drop-mn] — transforma o dropdown em mega-menu de 2 colunas
sw-navbar-drop-it
no link interno — subitem com suporte a título, descrição e ícone
[has-sub]
em [sw-navbar-drop-it] — marca que o item possui um submenu flyout de 3º ou 4º nível [sw-navbar-drop-sub]

Variantes

SaaS Minimal
barra precisa com indicador ativo animado e ações compactas
Floating
vidro controlado, largura contida e raio máximo de 6px
Overlay Hero
transparente sobre o hero e sólida depois do scroll
Autohide
libera espaço de leitura e retorna quando o usuário sobe
Mega Menu Visual
até 4 colunas, descrições e bloco editorial em destaque
Dashboard Topbar
ações, comandos, alertas e perfil para aplicações
Static
fluxo normal da página, sem fixação
Fixed
fixo no topo sobrepondo o conteúdo
Sticky
gruda no topo ao atingir a posição da barra
Glass (Vidro)
translúcido com desfoque de fundo inteligente
Grad (Gradiente)
gradiente de marca moderno com contraste refinado
Scroll Shrink
encolhe suavemente a altura e amplia a sombra ao rolar
Align Center
links centralizados com logo e ações nas extremidades
Mega-Menu Wide
grade de 2 colunas com categorias e descrições
Submenu & Sub-Submenu
navegação em cascata multinível (níveis 3 e 4)
Mobile Right
gaveta lateral que desliza da direita (padrão)
Mobile Left
gaveta lateral que desliza da esquerda (sw-navbar-mobile="left")
Mobile Top
menu expansível que desce do topo (sw-navbar-mobile="top")

Eventos

sw:navbar:toggle
disparado ao abrir ou fechar o menu mobile { open: boolean }
sw:navbar:dropdown
disparado ao abrir ou fechar um submenu { open: boolean }

API (JavaScript)

SW.Navbar.open(nav)
abre o drawer por seletor ou elemento
SW.Navbar.close(nav)
fecha e devolve o foco ao botão acionador
SW.Navbar.toggle(nav)
alterna o estado mobile por código

Requisitos

  • O drawer mobile precisa que a navbar não esteja com position:static sobreposta por outro elemento — em produção, normalmente fixed/sticky.

Limitações — o que ele não faz

  • O modo sticky necessita de altura explícita ou scroll no contêiner pai para calcular o encolhimento.
← AnteriorSeg (Segmented Control) Próximo →Sidebar