Ruta de navegación (breadcrumb)

Muestra la posición de la página actual dentro de la jerarquía y permite navegar hacia los niveles superiores.

Uso básico

Uso básico

import { LhBreadcrumb, LhBreadcrumbItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhBreadcrumb>
      <LhBreadcrumbItem to="/">Inicio</LhBreadcrumbItem>
      <LhBreadcrumbItem to="/components">Componentes</LhBreadcrumbItem>
      <LhBreadcrumbItem>Ruta de navegación</LhBreadcrumbItem>
    </LhBreadcrumb>
  )
}

Breadcrumb Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
separator	Carácter separador	string	—	'/'
maxItems	Número máximo de elementos visibles; si se supera, se contrae a «primer elemento + puntos suspensivos + último elemento»	number	—	0 (sin contraer)
sx	Props rápidas de layout	SxProps	—	—

BreadcrumbItem Props

Prop	Descripción	Tipo	Predeterminado
to	Dirección de destino; si existe y no es el último elemento, se renderiza como enlace	string	—
replace	Se mantiene por compatibilidad con la API de plus; el salto nativo <a> de React no se ve afectado por este conmutador	boolean	false
children	Texto	ReactNode	—

Controlado / no controlado

El estado de contracción es interno del componente: al hacer clic en el botón de puntos suspensivos se expanden todos los elementos, sin intervención externa. Pasar maxItems a 0 o no pasarlo significa que no se contrae.

Restricción de nodos hijos

children debe ser directamente LhBreadcrumbItem (se puede renderizar con .map); no puede estar envuelto por componentes personalizados: el componente padre inyecta los índices filtrando los tipos de los elementos hijo mediante Children.toArray, y envolverlos provocaría que la inyección de índices falle. Es coherente con la restricción de descenso collectPaneVnodes de lh-ui-plus.

Integración con el router

El ecosistema React no tiene un router global, por lo que los enlaces se renderizan como <a> nativa y navegan directamente. Al integrar React Router, intercepta con onClick y llama a navigate, o renderiza tú mismo <Link> en lugar de to.

Accesibilidad

El elemento raíz es <nav aria-label>, la lista es <ol>; el último elemento emite aria-current="page", y el botón de puntos suspensivos lleva aria-label (paquete de idioma breadcrumb.more).

ref

forwardRef<HTMLElement>: el elemento raíz <nav>. LhBreadcrumbItem reenvía HTMLLIElement.

Estilos

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/breadcrumb'