# Cabeçalho com menu (`cabecalho`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Logo do projeto (como imagem), menu e botão de ação. No celular o menu vira gaveta com botão, Esc e clique fora para fechar.

- **Categoria:** Estrutura
- **Equivalente no Elementor:** Cabeçalho do Theme Builder com Menu de Navegação (Nav Menu)
- **Arquivos:** `cabecalho.html`, `cabecalho.css`, `cabecalho.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-cabecalho`, `data-ds-cabecalho-botao`)
- **Depende de:** `botao`

## Quando usar
- Topo de site com mais de uma página ou de página longa com âncoras

## Quando não usar
- Página de captura ou de vendas focada em uma ação: menu tira atenção (use só o logo, ou nenhum cabeçalho)

## Variações
- **Fixo no topo ao rolar:** classe ds-cabecalho--fixo
- **Estático:** sem ds-cabecalho--fixo
- **Sem botão de ação:** remover o .ds-cabecalho__acao
- **Fundo escuro:** atributo data-ds-modo="<modo>" do DS e {{logo-negativo}} no lugar de {{logo}}

## Conteúdo esperado
- Logo do projeto: arquivo original de design-system/logo/ (trocar {{logo}})
- Até 5 itens de menu
- Texto do botão de ação

## Acessibilidade
- <nav> com aria-label
- Botão do menu com aria-expanded e aria-controls; nome muda entre Abrir e Fechar menu
- Esc fecha e devolve o foco ao botão
- aria-current="page" no item da página atual
- Sem JS o menu aparece aberto (nunca some)
- Use o link .ds-pular do base.css antes do cabeçalho

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao/botao.css">
<link rel="stylesheet" href="componentes/cabecalho/cabecalho.css">
<script src="componentes/cabecalho/cabecalho.js" defer></script>
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cor-acento`, `--ds-cor-borda`, `--ds-cor-fundo`, `--ds-cor-texto-destaque`, `--ds-cor-titulo`, `--ds-espaco-2`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-espaco-6`, `--ds-espaco-8`, `--ds-logo-largura`, `--ds-pagina-x-mobile`, `--ds-raio-md`, `--ds-sombra-md`.

## Notas

Logo: largura vem de --ds-logo-largura (mínimo do manual quando o DS declara). Nunca recolorir, recortar ou trocar o logo por texto: regra do Claudio em PROJETOS.md.