# PageHeader

> El encabezado de una pantalla: migas, título, bajada y acciones.

```tsx
import { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderTitle } from "sebs7n-ui/page-header"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Con migas, acciones y tabs

Cualquier hijo que no sea título, bajada o acciones ocupa una fila entera debajo.

```tsx
import { Button } from "sebs7n-ui/button"
import { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderTitle } from "sebs7n-ui/page-header"
import { Tabs, TabsList, TabsTrigger } from "sebs7n-ui/tabs"

function Basico() {
  return (
    <PageHeader
      breadcrumb={
        <>
          <a href="/docs">Facturas</a>
          <span aria-hidden="true">›</span>
          <span>0012</span>
        </>
      }
    >
      <PageHeaderTitle>Factura 0012</PageHeaderTitle>
      <PageHeaderDescription>Acme S.A. · emitida el 01/09 · vence el 30/09.</PageHeaderDescription>
      <PageHeaderActions>
        <Button variant="outline">Descargar</Button>
        <Button variant="accent">Enviar por email</Button>
      </PageHeaderActions>
      <Tabs defaultValue="resumen">
        <TabsList>
          <TabsTrigger value="resumen">Resumen</TabsTrigger>
          <TabsTrigger value="items">Ítems</TabsTrigger>
        </TabsList>
      </Tabs>
    </PageHeader>
  )
}
```

## Props

### PageHeader

Hereda las props de `<header>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `breadcrumb` | `React.ReactNode` | — | Solo en páginas de detalle (Viajes › #A1B2). |
| `breadcrumbLabel` | `string` | `"Migas de pan"` | Nombre del <nav> del breadcrumb. |
| `className` | `string` | — | — |

### PageHeaderActions

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### PageHeaderDescription

Hereda las props de `<p>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### PageHeaderTitle

Hereda las props de `<h1>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Migas primero, después las acciones. |

## Accesibilidad

- `PageHeaderTitle` es el `<h1>` de la página: uno solo por pantalla.
- `breadcrumb` emite un `<nav>` con su propio `aria-label` (configurable con `breadcrumbLabel`).
- Sin `"use client"`: sirve en un Server Component.

## Reglas de uso

- Primer hijo de `AppShellContent`.
- Hasta dos acciones: la principal y una secundaria. El resto, en un `DropdownMenu`.
- La bajada es una línea que explica la pantalla, no una descripción de marketing.

## Relacionados

[app-shell-content](/docs/components/app-shell-content.md) · [stat](/docs/components/stat.md) · [button](/docs/components/button.md)