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.

<PageHeaderRoot>
  <PageHeaderContainer>
    <div>
      <PageHeaderTitle>Imóveis</PageHeaderTitle>
      <PageHeaderDescription>
        Gerencie todos os imóveis do seu portfólio.
      </PageHeaderDescription>
    </div>
  </PageHeaderContainer>
</PageHeaderRoot>

Completo

Breadcrumb + ações

Apartamento 302

Rua Augusta, 1200 — São Paulo, SP

<PageHeaderRoot>
  <PageHeaderBreadcrumbs
    items={[
      { label: "Imóveis", href: "/imoveis" },
      { label: "Residenciais", href: "/imoveis?tipo=residencial" },
      { label: "Apartamento 302" },
    ]}
  />
  <PageHeaderContainer>
    <div>
      <PageHeaderTitle>Apartamento 302</PageHeaderTitle>
      <PageHeaderDescription>
        Rua Augusta, 1200 — São Paulo, SP
      </PageHeaderDescription>
    </div>
    <div className="flex shrink-0 items-center gap-2">
      <Button variant="outline" size="sm">Editar</Button>
      <Button size="sm">Novo Contrato</Button>
    </div>
  </PageHeaderContainer>
</PageHeaderRoot>

Com tabs

Tabs integradas ao header

Financeiro

<PageHeaderRoot className="pb-0">
  <PageHeaderBreadcrumbs
    items={[
      { label: "Dashboard", href: "/" },
      { label: "Financeiro" },
    ]}
  />
  <PageHeaderContainer>
    <div>
      <PageHeaderTitle>Financeiro</PageHeaderTitle>
    </div>
  </PageHeaderContainer>
  <Tabs defaultValue="overview" className="mt-3">
    <TabsList variant="line" className="-mb-px">
      <TabsTrigger value="overview">Visão Geral</TabsTrigger>
      <TabsTrigger value="income">Receitas</TabsTrigger>
      <TabsTrigger value="expenses">Despesas</TabsTrigger>
      <TabsTrigger value="reports">Relatórios</TabsTrigger>
    </TabsList>
  </Tabs>
</PageHeaderRoot>