Sistema de diseño
Breadcrumb
Elemento de navegación que proporciona a los usuarios un rastro o camino que les ayuda a ubicarse dentro de un sitio web.
Figma
Storybook
AEM
Overview
El breadcrumb consiste en una serie de enlaces, cada uno de ellos representa un nivel de jerarquía dentro del site y ayuda al usuario a entender los pasos que ha seguido en la navegación.
Jerarquía y buenas prácticas
El primer enlace en elbreadcrumb representa la página de inicio o el punto de partida de la navegación del usuario. Al hacer clic en este enlace, generalmente se lleva al usuario de vuelta a la página principal o raíz.
Los enlaces siguen un orden jerárquico, reflejando la estructura del sitio web o aplicación.
El breadcrumb es particularmente valioso para mejorar la navegación del usuario y proporcionar un contexto claro para los usuarios mientras exploran sitios web o aplicaciones con estructuras complejas. Contribuyen a un diseño de interfaz más amigable e intuitivo.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
En Oxygen tenemos variantes de tokens de color para poder utilizar el breadcrumb en distintos tipos de fondos.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Posición
El breadcrumb suele aparecer en la parte superior de las páginas, bajo la navegación y/o en el footer.
Niveles
El breadcrumb de Oxygen está preparado parar funcionar de forma estándar hasta 5 niveles de navegación.
Comportamiento en caso de necesitar más de 5 niveles
En caso de que aparezcan más de 5 niveles, se realizará una elipsis en el segundo nivel.
Al pinchar en ella, nos saldrá un Menú Dropdown · Small para saltar a ese nivel. Dentro del mismo, podemos hacer scroll en caso de que haya muchos niveles.
.png)
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes