Header
A casca global do produto — marca, navegação, transversais e perfil. O block que ancora toda tela do ME.
MeHeader. A app bar global do ME já montada (marca + navegação + transversais + perfil). Não remonte à mão — preencha navigation-items, profile-items e user.
O Header é a app bar AZUL me-brand global no topo de toda tela do produto: a marca "me." (branca) à esquerda, a navegação principal HORIZONTAL (áreas) no centro/topo, os serviços transversais (Mensagens, Genius, Carrinho) e o avatar/perfil à direita. O menu de áreas fica AQUI, no topo — nunca num rail/sidebar de ícones à esquerda. É a moldura que ancora o Layout e o Subheader — no mobile, vira uma barra compacta (menu + busca + carrinho) e a navegação desce para a NavBar no rodapé.
Quando usar
- Em toda tela autenticada do produto — é a casca padrão, não um componente opcional.
- Para o estado não autenticado (ex.: login), troque o avatar/perfil por
action-items(ex.: um botão "Entrar").
Anatomia
| Zona | Prop | Papel |
|---|---|---|
| Marca | brand | Logo + link (com logoMobile e cor de ícone). |
| Navegação | navigation-items | Itens (ícone + rótulo + badge); separator agrupa; siteMap: true abre o mapa do site. As transversais (Mensagens/Genius) entram aqui como itens com destino próprio. |
| Mapa do site | site-map-items | Áreas e seções da navegação expandida ("Mais"). |
| Perfil | profile-items · user | Avatar + menu (trocar conta, idioma, substituição, sair). |
| Não logado | action-items | Botões no lugar do avatar (ex.: "Entrar"). |
| Mobile | cart-badge · hide-options | Badge do carrinho; oculta carrinho/menu/busca. Emite toggle-mobile-menu, cart, search. |
A navegação cai para o layout mobile compacto quando os itens não cabem; disable-mobile-layout mantém o desktop sempre.
No mobile o app bar vira BRANCO (bg-default, logo ME azul — não a marca branca, que sumiria no fundo claro) e passa a concentrar os gatilhos: hambúrguer (abre o drawer da sidebar — ele SAI do subheader e vem pro header), busca, transversais e avatar. A navegação principal desce para a NavBar inferior (azul) e o CTA primário vira FAB. (Header claro no desktop = erro; no mobile = correto.)
Marca e cor
No ME o Header é a app bar AZUL me-brand (cor primária = me-brand). A cor vem sempre dos tokens via brand (logo + iconColor + background) — nunca HEX cru no componente. Header neutro/claro/verde = me-brand não aplicado (erro) — normalmente falta a paleta me-brand mapeada em --ui-primary (tokens da suite me-foundations).
No código
MeHeader (block EletroDS) — user, brand, navigation-items, profile-items, site-map-items, action-items, cart-badge, hide-options, disable-mobile-layout. Slots #brand e #navigation-item; eventos cart · toggle-mobile-menu · search. API e preview ao vivo em eletro.design/blocks/header.
Gotchas (verificados na index real): o divisor antes dos transversais depende de brand.iconColor (ex.: #FFFFFF) — sem ele o separador some. O clique de um item da navegação dispara por item.click (não onSelect/onClick). Com muitos itens use disable-mobile-layout pra não compactar e sumir o divisor no desktop.
Acessibilidade
- É o landmark de cabeçalho (
banner) com a navegação principal (navnomeado). - Item ativo marcado com
aria-current="page"— não só pela cor. - Ícones de ação (carrinho/busca/menu) têm rótulo acessível; badges de contagem são anunciados.
- No mobile, o alvo de toque dos itens respeita ≥ 44px e a ordem de tabulação é coerente.