Page Header

Title, breadcrumb, description, and actions. Simple, full, and tabs variants.

Simple

Title and description only

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."
/>

Full

Breadcrumb + actions

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></>}
/>

With tabs

Tabs integrated into the 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" },
  ]}
/>