AppHeader
Barra do topo da aplicação, com a altura de h-topbar. À esquerda, o botão do menu e o caminho; à direita, a busca que abre a paleta de comandos, as notificações e um espaço livre para ações. Ele se ajusta pela própria largura: a busca vira ícone e o caminho encurta.
Completo
Caminho com três níveis, paleta de comandos (clique na busca ou use ⌘K) e notificações com marcar como lidas.
Título único e ação
Com um item só, o caminho vira título. rightSlot recebe ações próprias antes dos ícones.
Celular
Em largura estreita, menuMode="drawer" troca o ícone para abrir a gaveta, a busca vira só ícone e o caminho mostra os dois últimos níveis.
Uso
<AppHeader
breadcrumb={[{ label: "Envelopes", href: "/envelopes" }, { label: "Contratos 2026" }]}
onToggleMenu={toggleMenu}
menuCollapsed={collapsed}
commandGroups={[{ heading: "Ações", items: [{ label: "Novo envelope", onSelect: create }] }]}
notifications={{ items, onMarkAllRead, onViewAll }}
/>Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| breadcrumb | AppHeaderCrumb[] | — | { label, href?, onClick? }. O último é a página atual e nunca é link. |
| onToggleMenu · menuCollapsed · menuMode | () => void · boolean · "collapse" | "drawer" | — | Botão do menu; sem onToggleMenu ele some. |
| showSearch · searchPlaceholder | boolean · string | true · "Buscar" | Campo que abre a paleta. |
| commandGroups | AppHeaderCommandGroup[] | — | Grupos e comandos da paleta. |
| enableShortcut | boolean | true | Atalho ⌘K / Ctrl+K. Desligue quando houver mais de um cabeçalho na tela. |
| notifications | { items, onMarkAllRead?, onViewAll? } | — | Sino com ponto quando há não lidas. |
| rightSlot | ReactNode | — | Ações antes dos ícones. |