PageNav
Botones de navegación de página anterior/siguiente renderizados en la parte inferior de las páginas.
El componente PageNav muestra controles de navegación en la parte inferior de las páginas, dirigiendo a los lectores a los capítulos lógicamente precedentes o siguientes.
Ejemplo de Navegación de Página Componible
Usando los subcomponentes primitivos de PageNav, puedes componer un pie de página paginador personalizado. El siguiente ejemplo muestra cómo recuperar metadatos de páginas hermanas activas a través de usePageNav, proporcionar las flechas direccionales mediante PageNav.Icon y estructurar los enlaces con bordes y estilos de diseño personalizados:
tsx
// docs/components/CustomFooterNav.tsx
import React from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { PageNav } from 'boltdocs/primitives'
import { usePageNav } from 'boltdocs/client'
export default function CustomFooterNav() {
const { prevPage, nextPage } = usePageNav()
if (!prevPage && !nextPage) return null
return (
<PageNav.Root className="border-t border-subtle pt-8 mt-12 grid grid-cols-2 gap-4">
{/* 1. Dirección de Página Anterior */}
{prevPage ? (
<PageNav.Link
to={prevPage.path}
direction="prev"
className="group p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 hover:border-primary-500 transition-colors"
>
<PageNav.Icon className="shrink-0 text-zinc-400 dark:text-zinc-500 group-hover:text-primary-500 transition-colors">
<ChevronLeft />
</PageNav.Icon>
<div className="flex flex-col">
<PageNav.Title className="text-xs uppercase font-bold text-zinc-400 dark:text-zinc-500 group-hover:text-primary-500 transition-colors">
Capítulo Anterior
</PageNav.Title>
<PageNav.Description className="text-sm font-semibold text-zinc-800 dark:text-zinc-200 mt-1">
{prevPage.title}
</PageNav.Description>
</div>
</PageNav.Link>
) : (
<div /> // Espaciador de compensación de columna
)}
{/* 2. Dirección de Página Siguiente */}
{nextPage ? (
<PageNav.Link
to={nextPage.path}
direction="next"
className="group p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 hover:border-primary-500 transition-colors text-right"
>
<div className="flex flex-col">
<PageNav.Title className="text-xs uppercase font-bold text-zinc-400 dark:text-zinc-500 group-hover:text-primary-500 transition-colors">
Siguiente Capítulo
</PageNav.Title>
<PageNav.Description className="text-sm font-semibold text-zinc-800 dark:text-zinc-200 mt-1">
{nextPage.title}
</PageNav.Description>
</div>
<PageNav.Icon className="shrink-0 text-zinc-400 dark:text-zinc-500 group-hover:text-primary-500 transition-colors">
<ChevronRight />
</PageNav.Icon>
</PageNav.Link>
) : (
<div /> // Espaciador de compensación de columna
)}
</PageNav.Root>
)
}
Subcomponentes Componibles
La primitiva PageNav proporciona los siguientes subcomponentes para la personalización de la estructura:
| Componente | Etiqueta HTML | Descripción | Props |
|---|---|---|---|
PageNav.Root / PageNav | <nav> | El contenedor principal exterior de cuadrícula flex que contiene los enlaces de paginación. | ComponentBaseProps |
PageNav.Link | <a> | Un elemento de anclaje optimizado que enlaza a páginas adyacentes. La flecha direccional la proporciona el tema a través de PageNav.Icon. | PageNav.Link Props |
PageNav.Title | <span> | Etiqueta de texto auxiliar direccional (por ejemplo, "Siguiente" o "Anterior"). | ComponentBaseProps |
PageNav.Description | <div> | Texto del título del encabezado del documento de la página hermana de destino. | ComponentBaseProps |
PageNav.Icon | <span> | La ranura para el gráfico de flecha o caret direccional (por ejemplo, un chevrón que apunta a la página adyacente). | ComponentBaseProps |
Props del Componente
ComponentBaseProps (Común)
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
children | ReactNode | undefined | Elementos de contenido hijos. |
className | string | undefined | Clases CSS utilitarias personalizadas. |
style | CSSProperties | undefined | Configuraciones de estilo en línea. |
Props de PageNav.Link
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
to | string | Requerido | Ruta de destino de la página hermana. |
direction | 'prev' | 'next' | Requerido | Indicador de dirección que controla la alineación flex. |
className | string | undefined | Clases utilitarias personalizadas. |
Personalización y estados
La primitiva PageNav es neutral en estilo: la raíz renderiza un <nav>, PageNav.Link renderiza un <a> de router simple y la flecha direccional la pasa el tema a través de PageNav.Icon. Cada decisión visual (colores, bordes, espaciado) pertenece al tema a través de sus ranuras className. No emite atributos de estado data-* — los tratamientos de página actual y hover se estilizan desde CSS en tu tema.
| Estado / Ranura | Mecanismo |
|---|---|
PageNav (raíz) | <nav> con un diseño integrado grid sm:grid-cols-2 gap-4; bordes y espaciado vía className |
PageNav.Link | <a> de router simple — sin atributos de estado; tratamientos hover y focus vía className |
direction | prev / next controla la alineación flex; coloca PageNav.Icon primero para prev y al final para next |
PageNav.Icon | Ranura <span> para el gráfico de flecha; tamaño y color vía className, hereda de currentColor |
PageNav.Title / PageNav.Description | Ranuras de texto; tipografía y color vía className |
tsx
<PageNav className="mt-12 grid gap-4 border-t border-subtle pt-8 sm:grid-cols-2">
<PageNav.Link
to={prevPage.path}
direction="prev"
className="group rounded-xl border border-subtle p-4 transition-colors hover:border-primary-500 hover:bg-surface"
>
<PageNav.Icon className="shrink-0 text-muted/60">
<ChevronLeft />
</PageNav.Icon>
<div className="flex flex-col">
<PageNav.Title className="text-xs font-semibold uppercase text-muted group-hover:text-primary-500">
Anterior
</PageNav.Title>
<PageNav.Description className="mt-1 text-sm font-medium text-body">
{prevPage.title}
</PageNav.Description>
</div>
</PageNav.Link>
</PageNav>
Last updated on October 18, 2026
