Header
O Header é o menu do topo da página. Ele leva a marca, os links e um botão de ação, e fica no topo enquanto a página
rola. Você escolhe a variante na composição da página; o conteúdo (marca, links, botão) vem dos dados do projeto.
As três variantes:
floating-anchors: flutua sobre a seção seguinte, sem barra de fundo.bar: barra sólida e fixa, com a sua própria linha na página.transparent: sem fundo sobre o hero; vira sólida quando a página rola.
Os links apontam para uma seção da mesma página (#id) ou para outra página. Quando a página atual é uma página do
site, o link correspondente recebe aria-current="page" e o leitor de tela anuncia onde ele está.
Header
Pasta: ui/sections/header
Variantes
| Id | Variante | Tom |
|---|---|---|
header-floating-anchors-dark | floating-anchors | dark |
header-bar-light | bar | light |
header-bar-gray | bar | gray |
header-bar-light-no-logo | bar · no logo | light |
header-bar-light-cta-link | bar · cta link | light |
header-bar-light-no-cta | bar · no cta | light |
header-bar-light-current-page | bar · current page | light |
header-transparent-light | transparent | light |
header-transparent-dark | transparent | dark |
header-transparent-dark-no-logo | transparent · no logo | dark |
header-transparent-light-photo | transparent · light-photo | light |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
variant | HeaderVariant | Não | — |
tone | Tone | Não | — |
brand | { readonly name: string; readonly logo?: UiImage; readonly href?: string; } | Sim | — |
links | readonly HeaderLink[] | Sim | — |
cta | Cta | Não | — |
currentPath | string | Não | Path of the page being rendered (`/servicos/corte`; a query or hash is ignored). The link to that page, or to the section that holds it, gets `aria-current="page"`; without it the markup carries no current page. |
Onde aparece nos templates
Seção intitulada “Onde aparece nos templates”templates/landing-page/models/produto/files/src/data/content.ts:23ecaptura,eventousambar.templates/one-page/files/src/data/content.ts:24etemplates/landing-page/models/lancamento/files/src/data/content.ts:23usamtransparentsobre o hero com carrossel.templates/multi-page/files/src/pages/layout.ts:85montabarno topo de todas as páginas do site.
Captura da primeira variante do catálogo (floating-anchors, tom escuro, em 1280 px):
Em 360 px, o botão de ação sai da barra e o menu abre pelo ícone de três linhas. O nome da marca também some abaixo de
768 px quando há logotipo (ui/sections/header/header.ts:42); a captura mostra só a barra, com o ícone do menu.
Botão de ação no celular
Seção intitulada “Botão de ação no celular”Abaixo de 768 px, o botão de ação sai da barra, mas só quando o script de navegação do cabeçalho carregou (sem
JavaScript, o botão continua visível). Nesse caso o menu mostra só os links; o botão não entra nele. O contato segue
nas outras partes da página: nos templates, o botão flutuante de WhatsApp (WhatsappFab) e a seção final. Ao escolher
o botão do cabeçalho, conte com essa troca no celular.