# Breadcrumb Un breadcrumb ayuda a entender la jerarquía de un sitio o producto complejo y permite volver rápido a niveles superiores. ```tsx import { Breadcrumb, BreadcrumbButton, BreadcrumbDivider, BreadcrumbItem } from "@fluentui/react-components"; Componentes Navegación Breadcrumb ``` ## Uso ### Navegación secundaria - Ú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. ### Contextos Lexy - 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. ## Comportamiento ### Ancho y overflow 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. ```tsx import { MoreHorizontal16Regular } from "@fluentui/react-icons"; Componentes Breadcrumb ``` ### Truncamiento - 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. ## Layout ### Separadores El separador solo diferencia niveles. No es interactivo, no recibe foco y queda oculto para tecnologías de asistencia. ```tsx Componentes Navegación Breadcrumb ``` ### Ruta no interactiva Si necesitas mostrar una ruta como contexto, pero no debe navegar, usa texto plano con separadores visibles. ```tsx

Lexy Design Componentes{" "} Breadcrumb

``` ## Accesibilidad ### Estructura semántica - 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. ### Teclado 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. ## Contenido ### Nombres breves - 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.