Índice da vitrine
Início
Ações
Formulários
Navegação
Autenticação
Retorno
Conteúdo
Navbars
Quatro mastheads para os quatro tipos de site do grupo: loja, curso, central de ajuda e landing page. Todos ao vivo nesta página.
Loja
Duas faixas. A busca fica no meio da primeira porque numa loja ela É a navegação; a segunda leva o mega-menu de departamentos, que mostra as prateleiras em vez de repetir os nomes que já estão na página.
Olá, Ada LovelaceMinha conta
<masthead-ecommerce :links :departments :account-menu :cart-count :wishlist-count />
Portal imobiliário
As duas faixas da loja, com o que um portal busca e guarda: um ESCOPO no campo (imóveis, corretores, imobiliárias), favoritos que abrem a própria lista, a conta numa lista curta e, no celular, um menu lateral com a conta no topo. O carrinho só aparece se for passado.
Olá, Ada LovelaceMinha conta
<masthead-real-estate :links :departments :scopes :account-links :wishlist-count wishlist-menu />
Curso
O que um site de aprendizado tem e nenhum outro: um lugar numa sequência. A segunda faixa diz qual curso e quanto falta, com os dois números ao lado da barra - "68%" sozinho não dá para agir.
Design de sistemas de interface
<masthead-learn :links :course :done :total />
Central de ajuda
O estado do serviço na barra e um único botão cheio, o de abrir chamado. Quem chega a uma central costuma chegar porque algo não funciona, e "já sabemos" dito ali economiza um chamado e uma espera.
<masthead-help-desk :links :status status-tone :ticket-label />
Landing page
A que tem menos coisa, de propósito. Uma landing page tem um trabalho só, e cada controle a mais na barra é uma saída dele: sobram a marca, as seções da própria página e as duas ações.
<masthead-landing :links :cta-label :sign-in-label />
floating: vidro sobre o hero
A base visual das plataformas do grupo.
<masthead-landing floating />
Com `floating` a barra sai do fluxo e vira vidro sobre o hero - quem a monta assim precisa dar o respiro de topo ao hero, porque ela não ocupa altura nenhuma.
A versão de celular
As cinco barras num viewport de 390px. O layout de celular vem de media queries, e elas medem a JANELA: uma caixa estreita no meio de uma página larga continuaria mostrando a barra de desktop.
São iframes de uma rota real (`/componentes/chrome-preview`), então o que está aqui responde ao toque: abra o hambúrguer, a lupa da loja e o menu de idioma.
Com e sem a cápsula
A mesma barra duas vezes; a única diferença é `flat`. A cápsula redonda é o padrão do template e é o que torna um ícone visível sobre uma barra translúcida.
flat, sem cápsula
Padrão, com cápsula
<masthead-help-desk lens />
Numa barra cujos outros itens são links de texto, a superfície redonda lê como o único controle que está pressionado; numa barra densa, quatro cápsulas seguidas são quatro objetos disputando com a marca. Os ícones e os menus mudam JUNTOS: misturar as duas skins é pior que qualquer uma delas.
O contrato que elas dividem
As quatro aceitam as mesmas quatro coisas. O resto é específico de cada tipo de site.
| Prop / evento | O que faz |
|---|---|
links | Os links da barra, já traduzidos por quem os passa. A barra não guarda rótulo nenhum. |
wide | Solta o teto da caixa de conteúdo, para uma área que é sempre larga. |
embedded | Tira o `sticky`, para uma barra montada DENTRO de uma página - é o que permite as amostras desta página serem as barras de verdade. |
search | O termo sai como evento; quem conhece a rota da listagem é a aplicação. Uma busca que só existe na memória de um componente é uma busca que ninguém pode enviar a ninguém. |
Para agentes de IA
Especificação desta página
Um arquivo Markdown com as tags, props, eventos e trechos desta família, copiáveis ipsis litteris, mais as regras que valem antes de qualquer linha. Entregue-o ao agente junto com a tarefa.
/agents/navbars.md