useBreadcrumbs
Obtener la lista de rutas padre que llevan a la página activa actual.
El hook useBreadcrumbs calcula la jerarquía de migas de pan por segmento de ruta para la ruta activa actual.
Importación
import { useBreadcrumbs } from 'boltdocs/client'
Valores de Retorno
| Propiedad | Tipo | Descripción |
|---|---|---|
breadcrumbs | Breadcrumb[] | Arreglo de definiciones de segmentos de ruta desde la raíz hasta la página actual. |
Esquema de Breadcrumb
interface Breadcrumb {
label: string // Visible text representation of the segment
path: string // Target URL path route
}
Ejemplo: Banner de Ruta Superior Personalizado
import { useBreadcrumbs } from 'boltdocs/client'
export function CustomHeaderPath() {
const { breadcrumbs } = useBreadcrumbs()
return (
<div className="bg-zinc-50 dark:bg-zinc-900 px-4 py-2 border-b flex gap-1 text-xs">
<span className="text-zinc-400">Current Position:</span>
{breadcrumbs.map((crumb, idx) => (
<span key={crumb.path}>
{idx > 0 && <span className="mx-1 text-zinc-400">›</span>}
<a href={crumb.path} className="hover:text-blue-500 text-zinc-600 dark:text-zinc-300">
{crumb.label}
</a>
</span>
))}
</div>
)
}
Last updated on July 27, 2026