Breadcrumb
Las breadcrumbs son un patrón 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. Son muy útiles en productos que tienen gran cantidad de contenido organizado jerárquicamente o en flujos de navegación que tienen diferentes pasos.
Las breadcrumbs son un elemento que mejora la experiencia de usuario.
Recomendaciones de uso
¿Qué hacer?
- Deben aparecer en todas las páginas donde sea necesario dar contexto de ubicación al usuario.
- Coloca las breadcrumbs cerca de la parte superior de la página, generalmente suelen ir o debajo del hero o centradas dentro de este (inverse).
- 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á en ese momento.
- Los títulos de los items deben ser cortos pero descriptivos.
- Usa las breadcrumbs si hay dos o más niveles de navegación.
- Siempre se colocan en posición horizontal.
¿Qué no hacer?
- No deben sustituir la navegación principal.
- No se recomienda usar si sólo hay un nivel de navegación.
- Nunca utilices más de una línea de texto.
Estados
Existen tres estados:
- Stanby: es la breadcrumb en su estado normal.
- Hover: es la interacción al pasar por encima de las breadcrumbs de jerarquías anteriores.
- Current page: es la página actual en la que se encuentra el usuario, no tienen ningún tipo de interacción.
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 en el color default del theme.
- Modo Default
- Modo Inverse
Estilos
Color
- Modo Default
| Nombre | Propiedad | Color token |
|---|---|---|
| Breadcrumb:stanby | color | $link-01 |
| Breadcrumb:hover | color | $interactive-hover-01 |
| Breadcrumb underline:hover | stroke | $interactive-hover-01 |
| Breadcrumb: current-page | color | $text-01 |
| Separator | color | $text-01 |
- Modo Inverse
| Nombre | Propiedad | Color token |
|---|---|---|
| Breadcrumb:stanby | color | $inverse-01 |
| Breadcrumb:hover | color | $interactive-hover-05 |
| Breadcrumb underline:hover | stroke | $interactive-hover-05 |
| Breadcrumb: current-page | color | $inverse-01 |
| Separator | color | $inverse-01 |
Tipografía
| Nombre | Tamaño fuente (px/rem) | Font- weight | Estilo |
|---|---|---|---|
| Breadcrumb:text | 13/0.813 | $inverse-01 | $tiny-L |
Estructura
