Breadcrumbs

Los Breadcrumbs muestran la ruta desde el inicio hasta la página actual y agilizan el acceso a secciones superiores.

Qué son los Breadcrumbs

Navegación secundaria: lista ordenada de enlaces separados por glifos (p. ej. >, flechas).

Para qué sirven los Breadcrumbs

• Orientación: ver la jerarquía de un vistazo
• Tecnología de apoyo: nav semántico + lista estructurada + esquema opcional
• SEO: datos estructurados BreadcrumbList si está activado
• WCAG: apoya 2.4.5 (varias formas), 2.4.8 (ubicación), 3.2.3 (navegación coherente cuando la colocación es estable)
• Menos clics: subir sin repetir el menú principal

Notas WCAG

• 2.4.5 Varias formas: orientación además de la navegación principal
• 2.4.8 Ubicación: muestra dónde estás en el sitio
• 3.2.3 Navegación coherente: mantén una posición predecible para los Breadcrumbs

Integración

Opción 1 — PHP (tema)

<?php
if ( function_exists( 'wcag_breadcrumbs' ) ) {
wcag_breadcrumbs();
}
?>

Opción 2 — Shortcode (constructores)

[wcag_breadcrumbs]

Ajustes

• Activar: interruptor global
• Etiqueta ARIA: p. ej. «Ruta de navegación»
• Clase CSS en <nav>: por defecto wcag-breadcrumbs
• Texto introductorio: prefijo opcional (p. ej. «Estás aquí:»)
• Disposición del intro: bloque encima frente a en línea
• Entrada de la página de inicio: solo texto, solo uno de los cuatro iconos Lucide incluidos (casa, casa con corazón, edificio de oficinas o puerta abierta), o un icono seguido de texto visible
• Etiqueta de la página de inicio: texto visible del enlace o nombre accesible del icono seleccionado; por defecto «Inicio». En la presentación combinada, el icono decorativo aparece antes del texto dentro del mismo enlace de inicio y utiliza el margen correspondiente del separador de escritorio o móvil.
• Presentación de la página actual: mostrar el último Breadcrumb como texto sin enlace o con enlace
• Punto de corte móvil: p. ej. 500px para estilos compactos

Separadores: elige de forma independiente para escritorio y móvil entre un carácter y uno de siete iconos Lucide: Chevron, Chevron doble, Flecha, Barra diagonal, Línea horizontal, Círculo o Rombo. El tamaño de los iconos de escritorio y móvil se puede configurar por separado entre 8 y 48 píxeles. Los iconos móviles se pueden girar 0°, 90°, 180° o 270°; el valor predeterminado es 0°. Los iconos direccionales se reflejan en contenido de escritorio de derecha a izquierda. Los márgenes y el color del separador/icono existentes se aplican a ambos modos.

Tipografía y enlaces: tamaños de los Breadcrumbs configurables por separado para escritorio y móvil con unidades rem, em, px o % (valor predeterminado: 1rem), interlineado, espaciado interior compartido de los elementos de lista en escritorio y móvil, espaciado interior compartido de los enlaces en píxeles (área de pulsación), colores por defecto/hover/actual, decoración del texto + hover. La primera entrada móvil no recibe espaciado interior adicional a la izquierda. Al cambiar la unidad, el valor se convierte de forma transparente tomando 16px como referencia; em y % pueden mostrarse de forma diferente según el contexto del tema. Se recomienda rem porque sigue el tamaño de fuente raíz del sitio web; siguen disponibles valores CSS avanzados como clamp(). Las etiquetas largas se ajustan en varias líneas en lugar de recortarse con puntos suspensivos.

Alineación: izquierda / centro / derecha en escritorio y móvil. En el diseño móvil apilado, los separadores permanecen junto a su etiqueta cuando la alineación está centrada o a la derecha, y los iconos permanecen centrados verticalmente respecto a la línea de texto. Las etiquetas móviles centradas comparten el eje central de la entrada de inicio independientemente del tamaño y el espaciado del separador.

Vista previa en vivo

Los ajustes separan el contenido y el comportamiento, la vista previa, la apariencia, el diseño adaptable y las opciones técnicas en tarjetas claras y sin numeración. Los controles móviles y avanzados están disponibles directamente, sin otro nivel desplegable, dentro de la tarjeta Diseño adaptable.

La vista previa siempre visible se actualiza al cambiar opciones, alterna entre anchos de escritorio y móvil, simula los estados estándar, hover y foco de teclado, y muestra el HTML generado bajo demanda. Utiliza todo el ancho de su propia tarjeta de vista previa en escritorio y móvil.

Ejemplos

Ejemplo 1: Por defecto

Activa los Breadcrumbs con el separador ⤏ y alineación a la izquierda; colócalos bajo la cabecera del tema mediante PHP.

Ejemplo 2: Mínimo

Un simple >, tipo más pequeño, colores suaves, intro en línea.

Ejemplo 3: Énfasis alto

Separador flecha, tipo mayor, alto contraste, intro en línea propia.

Ejemplo 4: Mobile-first

Glifo móvil compacto (⋮), espaciado más ajustado, centrado en pantallas pequeñas.

Consejos

• Mantén la colocación coherente en todo el sitio
• Usa la vista previa para afinar el espaciado
• Prueba los puntos de quiebre
• Cumple contraste de enlaces (1.4.3)
• Elige separadores que se lean como separadores, no como contenido
• Sobrescribe con CSS del tema en la clase contenedora
• La página actual suele ser no enlace + aria-current=»page»
• Verifica con lector de pantalla

Notas técnicas

• <nav> + <ol>
• Schema.org BreadcrumbList cuando la salida incluye JSON-LD (según ajustes del plugin)
• El ítem actual lleva aria-current=»page»
• Estilos en línea generados; el tema puede sobrescribir
• No hace falta JavaScript para el renderizado

Disponible para: Todos los planes Free