Page Header

Título + breadcrumb + descrição + ações. Variantes simples, completo e com tabs.

Simples

Apenas título e descrição

Imóveis

Gerencie todos os imóveis do seu portfólio.

<PageHeader
  title="Imóveis"
  description="Gerencie todos os imóveis do seu portfólio."
/>

Completo

Breadcrumb + ações

Apartamento 302

Rua Augusta, 1200 — Sao Paulo, SP

<PageHeader
  title="Apartamento 302"
  description="Rua Augusta, 1200 — Sao Paulo, SP"
  breadcrumbs={[
    { label: "Imóveis", href: "/imoveis" },
    { label: "Residenciais", href: "/imoveis?tipo=residencial" },
    { label: "Apartamento 302" },
  ]}
  actions={<><Button variant="outline">Editar</Button><Button>Novo Contrato</Button></>}
/>

Com Tabs

Tabs integradas ao header

Financeiro

<PageHeader
  title="Financeiro"
  breadcrumbs={[
    { label: "Dashboard", href: "/" },
    { label: "Financeiro" },
  ]}
  tabs={[
    { label: "Visão Geral", value: "overview" },
    { label: "Receitas", value: "income" },
    { label: "Despesas", value: "expenses" },
    { label: "Relatórios", value: "reports" },
  ]}
/>