Breadcrumb
Breadcrumb
Las breadcrumbs son un elemento de navegación secundario. Muestran el progreso jerárquico desde el nivel más alto de navegación, por lo que permite al usuario navegar por los niveles anteriores.
Se utilizan para poner en contexto al usuario de la página que está viendo en relación con el resto del sitio web o aplicación.
Recomendaciones de uso
- Deben aparecer en todas las páginas para dar contexto al usuario.
- No deben sustituir la navegación principal.
- Las breadcrumbs se colocan en la parte superior izquierda de la pantalla, debajo del header.
- Todos los ítems se vinculan a su nivel de navegación, excepto la última que identifica la página en la que le usuario está.
- Siempre se coloca en posición horizontal.
- No se recomienda usar si sólo hay un nivel de navegación.
- Nunca utilices más de una línea de texto.
Si se van a colocar sobre una imagen o fondo oscuro, se utilizarán en el color inverso; si van sobre un fondo claro utilizarán el azul primario.
Estados
Existen tres estados:
- Enabled: es la breadcrumb en su estado normal.
- Hover: es la interacción al pasar por encima de la breadcrumb enabled.
- Active: es la breadcrumb que nos señala en la página en la que se sitúa el usuario.
Estilos
Color
Tipografía
