Breadcrumb

• Úsalo como orientación secundaria; nunca reemplaza la navegación principal, el sidebar o el header.
• Muestra jerarquía, no historial de sesión. Si hay varias rutas posibles, elige la ruta más estable y común.
• El primer ítem representa la raíz relevante y el último representa la ubicación actual.
• No lo uses para flujos lineales de pasos; para eso corresponde un stepper o un encabezado de proceso.

• En documentación, úsalo para ubicar una página dentro de Fundamentos, Componentes o Patrones.
• En producto, úsalo cuando el usuario entra a una entidad profunda, como una causa, documento, cliente o expediente.
• Evita duplicarlo si el sidebar ya deja clara la ubicación y la página solo tiene un nivel de profundidad.

El breadcrumb no debe envolver. Cuando la ruta supera el ancho disponible, conserva visible el primer y el último nivel y colapsa niveles intermedios detrás de un overflow.

• Los nombres largos se truncan; no deben partirse en varias líneas.
• Si un ítem se trunca, agrega tooltip en hover o foco con el nombre completo.
• Mantén el breadcrumb entre 30% y 50% del ancho de la superficie cuando comparte fila con otros controles.
• En vistas estrechas o zoom alto, reduce la ruta a la última ubicación útil.

El separador solo diferencia niveles. No es interactivo, no recibe foco y queda oculto para tecnologías de asistencia.

Si necesitas mostrar una ruta como contexto, pero no debe navegar, usa texto plano con separadores visibles.

• Envuelve el breadcrumb en un nav con aria-label claro.
• Usa una lista ordenada para comunicar jerarquía.
• Marca el último ítem como ubicación actual con aria-current o la prop current del componente.
• Si un nivel existe en la jerarquía pero no tiene destino, mantenlo focusable y comunica esa condición con aria-label.

El foco debe entrar al primer elemento interactivo. Según la experiencia, la navegación interna puede resolverse con Tab o flechas, pero debe mantenerse consistente dentro del producto.

• Cada ítem debe coincidir con el título de la página cuando sea posible.
• Puedes acortar nombres para evitar repetición, pero solo con términos aprobados y específicos.
• Evita repetir palabras en todos los niveles; vuelve más difícil escanear la ruta.
• No escribas acciones en los ítems: usa sustantivos de ubicación, como Componentes, Causas o Documentos.