Migas de pan y camino del usuario

1) Función y valor

• muestran dónde estoy en la jerarquía;
• dar una vuelta rápida a un nivel superior;
• reducen el «back-bounce» (clics repetidos «back»);
• aumentan la detectabilidad de los niveles adyacentes y mejoran los SEO para las páginas de contenido.

Principios: simplicidad> detalle, jerarquía> historial de clics, estructura persistente> ruido dinámico.

2) Cuándo utilizar

Catálogos profundos y contenido (proveedor → categoría → juego/artículo).
Administración B2B e informes con 2-3 + niveles de anidamiento.
Longrids/muelles con secciones y tabla de contenido (migas + TAC).
No es necesario en las pantallas de nivel superior (vestíbulo/tablero barato), donde no hay profundidad.

3) Tipos de migas

1. Jerárquico (estructural): refleja IA, no la ruta del usuario:

'Inicio › Proveedores › Play' n GO › Book of Dead '

2. En el camino (history-based): muestra la ruta real (rara vez apropiada en la web; más cerca de «atrás»).
3. Híbrido: jerarquía + último paso con filtros/contexto guardados.

Recomendación: por defecto - jerárquico para evitar el «ruido» de las transiciones aleatorias.

4) Composición y formato

Separador: '›' o '/' (consistentemente con diseño y local).
Punto de partida: «Inicio «/logotipo clicabelen.
Truncamiento: a una profundidad> 4 niveles ocultar los eslabones medios en «»... con revelación.
Último elemento: página actual, no licuada y acentuada visualmente.
Longitudes de encabezado: recorte con puntos elásticos, pero con 'title '/tooltip completo cuando hover/focus.

5) Generación de migas (lógica)

Construir por jerarquía canónica URL/IA, no por referer 'y.
Para entidades (juego/artículo) tomar la categoría principal (o categoría «pan») en lugar de etiquetas aleatorias.
Para páginas dinámicas (filtros, ordenaciones): las migas indican la ruta hasta la sección básica y el contexto se muestra por separado (chips de filtro).
Con multitenencia, añadir el contexto de marca/operador al principio o en el selector cerca, pero no sobrecargar las migas.

6) Filtros, clasificación, paginación

Los filtros no deben «alargar» las migas. Visualícelas a continuación en los chips («Proveedores › Live» + chips: Geo = CA, Device = Mobile).
La paginación no está incluida en las migas; la página actual se muestra en el control de lista.
Restablecer filtros con un clic al nivel padre: volver a la categoría «limpia».

7) UX móvil

Colocar las migas debajo de H1 una línea; en caso de falta de espacio, el scroll horizontal o truncamiento de eslabones medios.
Los objetivos de tap ≥ 44px, un enfoque notable en la navegación por teclado (para PWA).
No duplicar el sistema «Atrás» - migas para la estructura, botón - para la historia.

8) Accesibilidad (A11y)

Use la semántica 'nat [aria-label = «breadcrumb»]' y 'ol> li'.
Especificar 'aria-current =' page 'en el último elemento.
El contraste de referencias corresponde a WCAG AA; el enfoque es visible.
El icono/separador no es la única señal (hay etiquetas de texto).
El orden en DOM corresponde al orden visual.

9) SEO y datos

Para las páginas de contenido, utilice los datos estructurados de BreadcrumbList (JSON-LD).
Las URL canónicas y las migas estables ayudan a la búsqueda de entender la jerarquía.
No indexar los nodos intermedios «vacíos» sin contenido (evitar esas páginas).

10) Patrones de visualización

Serie clásica: 'Inicio › Sección › Subsección › Página'.
Con truncamiento: 'Inicio ›... › Categoría › Tarjeta'.
Con contexto de marca (B2B): 'Marca A › Informes › Ingresos › NGR'.
Con anclajes en los muelles: 'Documentación › KYC › # Niveles-Validaciones' (ancla - en el TAC, migas - hasta la sección).

11) Comportamiento y microinterpretación

Hover/focus realza el enlace y el área del clic (toda la «miga», no sólo el texto).
La última «miga» puede tener un dop.menu con entidades vecinas (por ejemplo, otros juegos de este proveedor) - suavemente, sin sobrecargar.
Ir «a un nivel superior» mantiene la posición/página de la lista si esto no rompe la canónigo (por ejemplo, a '? page = 2').

12) Métricas y telemetría

• `breadcrumb_click(level, label, url)`
• 'breadcrumb _ expand _ more' (para truncados)
• 'back _ to _ parent _ retained _ context' (si han mantenido la posición/página)

• Use Rate: la proporción de usuarios que hacen clic en las migajas a la profundidad de la ≥2.
• Back-bounce ↓: reducir la cantidad de «back» inmediatamente después de entrar en la página profunda.
• Time-to-Parent: tiempo de retorno a un nivel superior.
• SEO CTR: cambiar el CTR de las páginas marcadas con migas.

13) Ejemplos para iGaming

B2C (casino): 'Home › Proveedores › Pragmatic Play › Gates of Olympus'. En la página del proveedor: chips de filtro (Live/Slots/Megaways); migas - sólo estructura.
Torneos: 'Home › Torneos › Otoño Copa › Reglas'.
B2B (proveedor): 'Panel › Contenido › Lanzamientos › Book of Ra (ID 12345)' - el último elemento no se hace clic; cerca del botón Abrir en el operador.

14) Antipattern

Migajas que repiten H1 palabra a palabra sin uso.
Rutas históricas en lugar de estructura (la caótica «verenica»).
Incluir filtros y paginaciones en migas («Juegos › Ranuras › página = 5»).
La última migaja es una referencia a sí mismo.
Exceso de profundidad, tamaño fino, bajo contraste - «migas invisibles».
Nombres de enlaces no coordinados con el menú/URL.

15) Lista de verificación de implementación

1. Mapa IA: definir rutas canónicas para entidades.
2. Generador: función que construye migas de IA/URL (sin depender del referer).
3. Truncamiento: reglas a profundidad> 4, popover con ruta completa.
4. A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.
5. Estilo: contraste AA, adaptable en mobile, separadores, tamaños.
6. Contexto: filtros/ordenaciones - chips a continuación, no en migas.
7. Telemetría: eventos click/expand, Time-to-Parent, back-bounce.
8. Documentación: ejemplos, anti-casos, hyde por el nombre de los eslabones.

16) Resultado

1. basados en la jerarquía canónica,

2. legible y accesible,

3. resistentes a los filtros/estados de la página,

4. con uso medible (telemetría/SEO).

Así que realmente ayudan a navegar y acortan el camino del usuario hacia el objetivo.