import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs';
import image1 from '../../stories/assets/breadcrumb/1.png';
import image2 from '../../stories/assets/breadcrumb/2.png';
import image3 from '../../stories/assets/breadcrumb/3.png';
import image4 from '../../stories/assets/breadcrumb/4.png';
import image5 from '../../stories/assets/breadcrumb/5.png';
import image6 from '../../stories/assets/breadcrumb/6.png';
import image7 from '../../stories/assets/breadcrumb/7.png';
import image8 from '../../stories/assets/breadcrumb/8.png';
import image9 from '../../stories/assets/breadcrumb/9.png';
import image10 from '../../stories/assets/breadcrumb/tag.png';
# Migas de pan / Breadcrumb
El componente migas de pan es un elemento de **navegación** **secundario** que se sitúa por norma general en la parte superior de una página, encima del título, cuya finalidad es mostrar al usuario la ubicación actual dentro de la arquitectura de información del sitio, permitiendo retroceder o avanzar a diferentes categorías del sitio de manera jerárquica y así no perderse a la hora de navegar.
Desde el punto de vista de la usabilidad, se trata de un elemento indispensable por la ayuda que ofrece a los usuarios en la navegación y también ayuda a los motores de búsqueda a rastrear y entender los sitios web, contribuyendo de esta manera a una mejora del posicionamiento. Sin embargo, este componente no debe de utilizarse para reemplazar por completo a la navegación principal ni para páginas con un solo nivel de navegación ya que pueden crear confusión innecesariamente.
Los elementos principales de las migas de pan son los **objetos de páginas**, estos deben ser cortos y reflejar claramente la ubicación a la que enlaza. En primer lugar indicará la página principal del sitio como primer nivel e irá profundizando en la arquitectura en base a la ruta de navegación
Existen migas de pan basadas en la **ubicación**, que se refiere a la posición actual del usuario en la jerarquía de la web, o basada en la **ruta**, que muestra la ruta por la que navegó el usuario para llegar a la página actual, en lugar de reflejar la arquitectura de información del sitio.
### Variaciones
Por defecto, las migas de pan muestran una organización de páginas que no incluyen la **página actual**. Sin embargo, esta puede ser incluida en las migas de pan para ayudar al usuario a orientarse mejor.
| **Migas de pan sin página actual** | **Migas de pan con página actual** |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| | |
Asimismo, cuando las migas de pan acumulan muchos elementos y es un componente muy largo, se puede reducir mediante un **elemento de sobrecarga**.
| **Migas de pan completas** | **Migas de pan con sobrecarga** |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| | |
Cuando el espacio para las migas de pan sea limitado, se mostrarán los enlaces de la primera y las dos últimas páginas y el resto de enlaces de páginas se condensarán en un menú adicional. Las migas de pan nunca se mostrarán en dos líneas.
### Anatomía
Las anatomía de las migas de pan se compone de una cadena de objetos de página separados por un separador «/». Estos objetos se representan con el componente enlace, y tienen una distancia de separación entre ellos de 8px.
Cuando las migas de pan están sobrecargadas, se emplea el elemento de sobrecarga para poder acceder a los elementos que no se muestran en principio.
### Comportamiento
Todos los enlaces de página que forman parte de la ruta de navegación deberán de ser interactivos y enlazar con sus respectivas páginas. Los usuarios podrán activar un elemento haciendo clic con el ratón en el enlace de página. Los separadores entre enlaces de páginas no serán interactivos.
Los usuarios también podrán activar el enlace de la ruta de navegación presionando la tecla «*enter*» del teclado y podrán navegar entre los diferentes enlaces de ruta presionando las teclas de tabulación.
Los estados de este componente son los de sus enlaces: enable, hover, focus, active y skeleton.
### Código
```
```
### Tokens
#### Color
| **Class** | **Property** | **Color token** |
| ----------------------------------------- | ------------ | --------------------- |
| `.bx--lin`k | color | `$link-01` |
| `.bx--link:hover` | color | `$hover-primary-text` |
| `.bx--link:active` | color | `$text-01` |
| `.bx--link:focus` | outline | `$focus` |
| `.bx--breadcrumb-item::after` | color | `$text-01` |
| `.bx--breadcrumb-item--current .bx--link` | color | `$text-01` |
#### TIpografía
| **Class** | **Type token** |
| ----------- | ---------------- |
| `.bx--link` | `$body-short-01` |
#### Estructura
| **Class** | **Property** | **Spacing token** |
| ---------------------- | ------------ | ----------------- |
| `.bx--breadcrumb-item` | margin-left | `$spacing-03` |