UIMigas de pan
Muestran dónde está la página en el sitio y dan una vía de vuelta, un nivel cada vez.
Las migas de pan son el camino desde la página de inicio hasta la actual. Responden a «¿dónde estoy?» y dejan subir sin usar el botón de atrás.
Cuándo usarlo
Úsalo
- Cada nivel es un enlace salvo el último, que es la página actual.
- Nombres cortos; si el camino es largo, acorta los niveles intermedios.
- Colócalas encima del título de la página, donde se mira primero.
No
- Usarlas como única navegación del sitio.
- Repetir la página actual como enlace.
- Mostrarlas en la página de inicio.
Anatomía
Un nav con una lista ordenada (breadcrumb) de elementos (breadcrumb-item) separados por un divisor que dibuja el estilo; el último elemento está activo y lleva aria-current="page".
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Las migas propias de Moodle 5.3
Moodle 5.3 dibuja sus migas con un componente propio (mds-breadcrumb), que acorta un camino largo con un menú. Donde una página muestra las migas de Moodle, son estas.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Migas × longitud | Hasta cuatro niveles completos; más allá, acorta los intermedios (Moodle 5.3 lo hace con un menú). |
| Migas + icono | Un icono solo en el primer nivel (Inicio), nunca en todos. |
| Migas × título | Sobre el título de la página, que repite el último nivel. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| Los enlaces son discretos y toman un tinte al pasar | El camino es orientación, no la página; no debe competir con el título. |
| La página actual es oscura y en seminegrita | Es lo único que no es un enlace, y la diferencia se ve sin color. |
| Un enlace en el que se hizo clic se ve como un enlace en reposo | Solo el teclado recibe el anillo, así que un clic nunca deja una caja pegada a un nivel. |
Clases
| Clase | Qué hace |
|---|---|
breadcrumb |
La lista ordenada |
breadcrumb-item |
Un nivel |
active |
La página actual (no es un enlace) |
En esta versión
Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.
Accesibilidad
- El envoltorio es un
navconaria-label="breadcrumb". - La página actual lleva
aria-current="page". - El divisor lo dibuja el CSS, así que un lector de pantalla no lo lee.