Home/Componentes/Header

Header

Componente de cabeçalho completo e flexível para aplicações, seguindo o padrão do hollow-UI. Inclui logo, título, ações personalizáveis, theme toggle e menu mobile responsivo.

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add header

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

💡 Logo Padrão

O componente Header vem com um logo padrão do hollow-UI que se adapta automaticamente aos temas claro e escuro. Você pode substituí-lo facilmente usando a prop logo com seu próprio caminho de imagem ou componente JSX personalizado.

Header Básico

Header simples com logo, ações padrão e theme toggle:

Header Básico

import { Header } from "@/registry/ui/Header";
import { Bell, Settings, User } from "lucide-react";

const basicActions = [
  {
    id: "notifications",
    icon: Bell,
    title: "Notificações",
    showBadge: true,
    badgeCount: 5,
    onClick: () => alert("Notificações!"),
  },
  {
    id: "settings",
    icon: Settings,
    title: "Configurações",
    onClick: () => alert("Configurações!"),
  },
  {
    id: "profile", 
    icon: User,
    title: "Perfil",
    onClick: () => alert("Perfil!"),
  },
];

<Header 
  actions={basicActions}
  onMobileMenuClick={() => alert("Menu mobile!")}
/>

Header com Título

Header incluindo título da aplicação:

Minha Aplicação hollow-UI

Header com Título

<Header 
  title="Minha Aplicação hollow-UI"
  actions={basicActions}
  onMobileMenuClick={() => alert("Menu mobile!")}
/>

Header Estendido

Header com mais ações, incluindo conteúdo personalizado como o Assistente (opcional):

Sistema Completo

Header Estendido

const extendedActions = [
  {
    id: "search",
    icon: Search,
    title: "Buscar",
    onClick: () => alert("Busca!"),
  },
  {
    id: "messages",
    icon: MessageSquare,
    title: "Mensagens",
    showBadge: true,
    badgeCount: 12,
    onClick: () => alert("Mensagens!"),
  },
  {
    id: "assistant",
    title: "Assistente",
    onClick: () => alert("Assistente!"),
    children: (
      <>
        <Image
          src="/assistant1.png"
          alt="assistente"
          width={375}
          height={335}
          className="h-5 w-auto dark:hidden"
        />
        <Image
          src="/assistant1-branco.png"
          alt="assistente"
          width={375}
          height={335}
          className="h-5 w-auto hidden dark:block"
        />
      </>
    ),
  },
];

<Header 
  title="Sistema Completo"
  actions={extendedActions}
/>

Header para Aplicação Social

Exemplo de header para uma aplicação social com diferentes tipos de ações:

Social Network

Header Social

const socialActions = [
  {
    id: "likes",
    icon: Heart,
    title: "Curtidas",
    showBadge: true,
    badgeCount: 28,
    onClick: () => alert("Curtidas!"),
  },
  {
    id: "downloads",
    icon: Download,
    title: "Downloads",
    onClick: () => alert("Downloads!"),
  },
  {
    id: "uploads",
    icon: Upload,
    title: "Uploads",
    onClick: () => alert("Uploads!"),
  },
];

<Header 
  title="Social Network"
  actions={socialActions}
/>

Header Personalizado

Header com logo personalizado, sem theme toggle e cor de fundo diferente:

CustomApp

Header Personalizado

<Header 
  logo={
    <div className="flex items-center gap-2">
      <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
        <span className="text-white font-bold">UI</span>
      </div>
      <span className="text-white font-semibold">CustomApp</span>
    </div>
  }
  actions={[
    {
      id: "shield",
      icon: Shield,
      title: "Segurança",
      onClick: () => alert("Segurança!"),
    },
    {
      id: "settings",
      icon: Settings,
      title: "Configurações",
      onClick: () => alert("Configurações!"),
    },
  ]}
  showThemeToggle={false}
  backgroundColor="bg-blue-600"
/>

Comportamento Responsivo

O Header se adapta automaticamente a diferentes tamanhos de tela:

Desktop (com título visível)

Sistema Desktop

Mobile (com botão de menu)

Sistema Mobile

Redimensione a janela ou visualize em dispositivo móvel para ver o menu mobile

Dependências

O componente Header depende dos seguintes pacotes:

Instalar dependências

npm install lucide-react next-themes

Componentes Relacionados

• HeaderButton - Botões de ação do header
• ThemeToggle - Alternador de tema

Utilitários

• @/lib/utils - Funções auxiliares
• next/image - Otimização de imagens

Interface e Props

Header Interfaces

interface HeaderAction {
  /** Identificador único da ação */
  id: string;
  /** Ícone do Lucide React */
  icon?: LucideIcon;
  /** Conteúdo personalizado (para imagens, texto, etc.) */
  children?: React.ReactNode;
  /** Tooltip do botão */
  title?: string;
  /** Função executada ao clicar */
  onClick?: () => void;
  /** Mostrar badge de notificação */
  showBadge?: boolean;
  /** Número do badge */
  badgeCount?: number;
  /** Se verdadeiro, desabilita a ação */
  disabled?: boolean;
}

interface HeaderProps {
  /** Logo da aplicação (caminho ou componente) */
  logo?: string | React.ReactNode;
  /** Título da aplicação */
  title?: string;
  /** Array de ações do header */
  actions?: HeaderAction[];
  /** Se verdadeiro, inclui o ThemeToggle automaticamente */
  showThemeToggle?: boolean;
  /** Se verdadeiro, mostra o botão de menu mobile */
  showMobileMenu?: boolean;
  /** Função do menu mobile */
  onMobileMenuClick?: () => void;
  /** Cor de fundo personalizada */
  backgroundColor?: string;
  /** Classes CSS adicionais */
  className?: string;
}

Props Principais

logo - Logo como string (path) ou JSX personalizado
title - Título da aplicação (opcional)
actions - Array de ações do header
showThemeToggle - Incluir theme toggle (padrão: true)
showMobileMenu - Mostrar botão menu mobile (padrão: true)
backgroundColor - Cor de fundo personalizada

Características

✓ Layout responsivo automático
✓ Menu mobile integrado
✓ Theme toggle com suporte a dark mode
✓ Ações personalizáveis com badges
✓ Suporte a ícones do Lucide React
✓ Conteúdo personalizado (imagens, JSX)
✓ Logo com suporte automático a temas
✓ Acessibilidade com tooltips

Uso Avançado

Logo Personalizado com Temas

Você pode usar imagens diferentes para tema claro e escuro:

Logo com tema

<Header 
  logo={
    <>
      <Image
        src="/logo-light.png"
        alt="Logo"
        width={200}
        height={50}
        className="h-9 w-auto dark:hidden"
      />
      <Image
        src="/logo-dark.png"
        alt="Logo"
        width={200}
        height={50}
        className="h-9 w-auto hidden dark:block"
      />
    </>
  }
  actions={actions}
/>

Ações com Estado Dinâmico

Badges podem ser atualizados dinamicamente:

Estado dinâmico

const [notifications, setNotifications] = useState(5);

const actions = [
  {
    id: "notifications",
    icon: Bell,
    title: "Notificações",
    showBadge: true,
    badgeCount: notifications,
    onClick: () => {
      setNotifications(0); // Limpar notificações
    },
  },
];

<Header actions={actions} />

Integração com Sistema de Navegação

Conecte o header com um menu lateral:

Com menu lateral

const [isMenuOpen, setIsMenuOpen] = useState(false);

<Header 
  title="Minha Aplicação"
  onMobileMenuClick={() => setIsMenuOpen(!isMenuOpen)}
  actions={actions}
/>

{isMenuOpen && (
  <MobileSidebar 
    isOpen={isMenuOpen}
    onClose={() => setIsMenuOpen(false)}
  />
)}