Breadcrumb

El breadcrumb (o ruta de navegación) es un componente que muestra una serie de enlaces jerárquicos que indican al usuario en qué parte del sitio o aplicación se encuentra. Cada enlace representa un nivel dentro de la estructura, ayudando a contextualizar la navegación y a facilitar el retorno a niveles anteriores.

• El primer enlace del breadcrumb representa el punto de partida, normalmente la página de inicio. Al hacer clic en él, se redirige al usuario al nivel raíz del sitio o aplicación.
• Los enlaces se organizan de forma jerárquica, reflejando la estructura lógica del contenido. El orden debe ser claro, de mayor a menor nivel de profundidad.
• El uso del breadcrumb es especialmente útil en interfaces con múltiples niveles de navegación, ya que aporta contexto, mejora la orientación y contribuye a una experiencia de usuario más fluida e intuitiva.

Existen variantes para poder posicionar el breadcrumb sobre superficies oscuras

El componente Breadcrumb en Energy se adapta dinámicamente al contenido y al contexto en el que se utiliza. A continuación se describen los principales comportamientos que debe seguir según su configuración y uso.

‍

Constraints

Width

• El componente no tiene un ancho máximo definido.
• Se ajusta al contenido disponible sin recortar elementos de forma arbitraria.

Overflow

• En caso de que el contenido exceda el ancho disponible, el breadcrumb hace salto de línea por elemento completo.
• Cada ítem del breadcrumb se mantiene como unidad; no se parte ni se trunca.
• Este comportamiento se mantiene también cuando el breadcrumb está colapsado.

Comportamiento colapsable

Para mantener la legibilidad y evitar un exceso de información cuando hay demasiados niveles jerárquicos (por ejemplo, más de 5), el breadcrumb puede configurarse como colapsable. En este caso, los niveles intermedios se agrupan bajo una representación resumida ("...").

• Al interactuar con "...", se muestra un dropdown que permite al usuario visualizar y navegar entre los niveles intermedios ocultos del breadcrumb.
• Este comportamiento garantiza el acceso completo a toda la jerarquía sin comprometer el espacio ni la claridad.