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
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 íconesswi-*.<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
Monte a barra com as peças.
actmarca 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.
<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>
<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>
<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).
<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>
<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>
<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".
<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>
<!-- 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>
<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 -->
<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.
<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>
<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>
<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.
<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>
<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>
<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
| Palavra | O que faz | Exemplo |
|---|---|---|
| Peças | ||
sw-navbar | Na <nav>: a barra inteira. | <nav sw-navbar> |
sw-navbar-brand | O logo / nome do site (normalmente um link para a página inicial). | <a href="/" sw-navbar-brand> |
sw-navbar-mn | A área dos links. No celular, é ela que vira o menu lateral. | <div sw-navbar-mn> |
sw-navbar-it | Cada link do menu. | <a sw-navbar-it href="/"> |
act | No 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-actions | A área dos botões à direita (entrar, carrinho, agendar). | <div sw-navbar-actions> |
sw-navbar-tgl | O 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-at | Em sticky/fixed: depois de quantos px rolados ela fica mais baixa e com sombra. Padrão 40. | sw-navbar-shrink-at="120" |
--sw-navbar-h | Variável CSS: altura normal. Padrão 7rem. | --sw-navbar-h: 8rem; |
--sw-navbar-h-shrink | Variável CSS: altura depois de rolar. Padrão 5.8rem. | --sw-navbar-h-shrink: 6rem; |
| Celular | ||
sw-navbar-collapse-at | Largura (px) em que vira ☰. always (ou 0) = sempre; never = nunca. Padrão 992. | sw-navbar-collapse-at="768" |
sw-navbar-side | Lado de onde o menu sai: right (padrão) ou left. | sw-navbar-side="left" |
| Submenu | ||
sw-navbar-drop-wrap | Caixa que envolve o link-pai e o submenu. | <div sw-navbar-drop-wrap> |
sw-navbar-drop | No sw-navbar-it que abre o submenu. | <a sw-navbar-it sw-navbar-drop> |
sw-navbar-drop-arr | No ícone de setinha dentro do link-pai: gira quando abre. | <i class="swi-chevron-down" sw-navbar-drop-arr> |
sw-navbar-drop-mn | A caixa do submenu (logo depois do link-pai). | <div sw-navbar-drop-mn> |
sw-navbar-drop-it | Cada item do submenu. | <a sw-navbar-drop-it> |
sw-navbar-drop-sep | Linha 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-sub | Num <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-sub | A 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 | ||
wide | No sw-navbar-drop-mn: vira uma caixa larga de 2 colunas. | <div sw-navbar-drop-mn wide> |
sw-navbar-drop-col | Uma coluna do mega-menu. | <div sw-navbar-drop-col> |
sw-navbar-drop-ttl | Tí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-desc | Descrição curta embaixo do nome do item. | <span sw-navbar-drop-desc>…</span> |
| Classes extras | ||
sw-navbar-logo | Selo quadrado em degradê para o ícone do logo. | <span class="sw-navbar-logo"><i class="swi-rocket"></i></span> |
sw-navbar-social | Grupo 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.
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 -->
<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>
<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>
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<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:dropdownsw-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)[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 íconesswi-*/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). Osw-navbar-drop-mnvem depois do link, os dois dentro dosw-navbar-drop-wrap. - Colocar
sw-navbar-drop-align="right"no link: ele vai no<div sw-navbar-drop-wrap>. - Usar
sw-navbar-drop-colsemwidenosw-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
actno 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).

