Migas de pan

Breadcrumbs UI - Visión General

El componente Breadcrumbs UI de Emvi UI proporciona una pista de navegación jerárquica que ayuda a los usuarios a entender dónde están y cómo volver a niveles anteriores dentro de la arquitectura de la información. Está optimizado para productos con árboles de contenido profundos (por ejemplo, paneles de administración, catálogos, doc sites y apps B2B) y prioriza la claridad, la consistencia semántica y la accesibilidad.

La implementación contempla rutas con longitudes variables, soporte para truncado inteligente, colapsado en puntos de quiebre y slots para insertar íconos o elementos de estado. El patrón mantiene una separación visual clara mediante separadores ( /, > o íconos SVG ) y distingue correctamente enlaces navegables del ítem actual (no clicable por defecto). El sistema incluye estilos para tema claro/oscuro y respeta tokens de tipografía, color y espaciado para asegurar un look & feel coherente con el resto del Design System.

Anatomía y Patrones

Un breadcrumb típico consta de:

- Contenedor (wrapping nav) con aria-label="Breadcrumb" y lista ordenada o no ordenada (<ol>/<ul>).
- Ítems (<li>) que representan niveles de jerarquía (Home → Sección → Sub-sección → Página).
- Separadores visuales o icónicos entre ítems.
- Ítem actual, marcado como aria-current="page" y no navegable por defecto.

Patrones soportados:

- Con ícono de inicio (Home) y label opcional.
- Con estados (por ejemplo, elementos deshabilitados cuando no hay permiso).
- Con microcopys (subtítulos cortos o badges de estado).
- Con scroll horizontal en vistas muy estrechas.

Tipos y Variaciones

Emvi UI ofrece varias variaciones listas para producción:

- Clásico: texto + separadores.
- Con íconos: íconos por nivel (carpeta, producto, documento).
- Compacto: colapsa los primeros niveles en un botón "..." con menú emergente.
- Truncado: acorta labels largos según ancho disponible (con title/tooltip para el label completo).
- Responsivo: cambia de modo completo a compacto en breakpoints definidos (por ejemplo, md, sm).

Cada variante hereda tokens de color, tipografía y espaciado. El ítem actual utiliza un estilo que lo diferencia del resto (contraste y cursor no-interactivo), evitando confusión sobre su clicabilidad.

Simplificando la navegación

Las migas de pan de UI simplifican la navegación proporcionando un camino claro hacia secciones anteriores. Muestran la ubicación actual del usuario dentro de la jerarquía del sitio, facilitando entender cómo volver a páginas anteriores o categorías de nivel superior. Esto reduce la frustración y ayuda a los usuarios a sentirse más en control de su experiencia de navegación.

Mejorando la experiencia del usuario

Las migas de pan mejoran la experiencia del usuario al hacer el sitio más intuitivo y fácil de usar. Proporcionan contexto sobre dónde se encuentra el usuario dentro del sitio, lo que puede ser especialmente útil para sitios web grandes con estructuras complejas. Al mostrar el rastro de páginas visitadas, las migas de pan ayudan a los usuarios a evitar perderse y aseguran que puedan encontrar fácilmente el camino de regreso a secciones clave.

Mejorando el SEO

Las migas de pan también pueden mejorar el SEO al proporcionar a los motores de búsqueda una estructura clara de su sitio. Crean enlaces internos que ayudan a los motores de búsqueda a comprender la jerarquía y organización de su contenido. Esto puede llevar a un mejor indexado y potencialmente a mejores clasificaciones en los resultados de búsqueda. Nuestro UI KIT incluye componentes de migas de pan fáciles de implementar que mejoran la navegación y contribuyen a una estructura de sitio más organizada y accesible.

Escala, Espaciado y Separadores

El componente define alturas y tamaños tipográficos por densidad: SM, MD y LG. Cada tamaño incorpora:

- Espaciado interno que evita solapamientos con íconos o badges.
- Separadores con tamaño relativo a la línea base tipográfica.
- Gaps horizontales consistentes entre ítems y separadores.

Las variantes de separador (/, >, • o SVG) siguen el color de texto "muted" para minimizar ruido visual y mantener foco en los labels.

Responsividad, Truncado y Colapsado

Para rutas largas, Emvi UI incorpora:

- Truncado multietapa: acorta primero niveles medios, luego iniciales, preservando el inicio y el final.
- Colapsado: convierte los niveles intermedios en un botón "..." que despliega un menú con la ruta completa.
- Scroll x: activa desplazamiento horizontal en contenedores estrechos.

Las reglas de truncado evitan cortar palabras esenciales (por ejemplo, IDs o slugs clave) y mantienen accesibilidad con tooltips y aria-label descriptivos.

Accesibilidad y Semántica

- Contenedor nav con aria-label="Breadcrumb"
- Lista semántica <ol> o <ul>; cada nivel como <li>
- Ítem actual con aria-current="page"
- Enlaces con estados focus visibles y tamaño de toque suficiente
- Soporte de teclado: tabulación secuencial, activación con Enter/Espacio y cierre del popover con Esc en modo compacto
- Contraste adecuado para texto y separadores en tema claro/oscuro

Integración con Figma y Tailwind

En Figma, el componente se distribuye como una estructura anidada con variantes: tamaño (SM/MD/LG), separador (texto/SVG), colapsado (on/off), con íconos (on/off). Incluye Auto Layout y estilos conectados a tokens globales.

En Tailwind, la base utiliza utilidades como flex, items-center, gap-x-*, text-sm|md|lg, text-muted-foreground, y slots con inline-flex para separadores. El modo compacto añade lógica con hidden md:flex y un popover con menú vertical (flex-col, divide-y). El sistema es theme-aware y se alinea con data-state para estados activos.

Buenas Prácticas de Implementación

- Mantener los niveles esenciales visibles (Home y página actual); colapsar niveles intermedios en rutas profundas.
- Evitar labels ambiguos; preferir nombres cortos y significativos.
- Deshabilitar la navegabilidad del ítem actual para evitar confusiones.
- Proveer tooltips o title en labels truncados y atributos aria-label descriptivos.
- Alinear el estilo de separadores con la densidad de la interfaz (más livianos en UIs densas).
- Probar en teclado y lectores de pantalla; validar contraste en ambos temas.