Pasar al contenido principal

Migas de pan

El componente de migas de pan ayuda a los usuarios a comprender dónde se encuentran dentro de la estructura de un sitio web y moverse entre niveles.

Tipos de migas de pan

Dispositivos de escritorio

Las rutas de navegación muestran dónde se encuentra la página actual en la jerarquía del sitio web. Utilizar migas de pan refuerza la estructura del sitio. En desktop, se ve completo.

Dispositivos móviles

Se ve de manera reducida, solo para permitir un regreso.

Migas de pan en dispositivos móviles

Diseño y estructura (contexto de uso)

Ubicación

Se ubican sobre el título de la página y muestran el progreso jerárquico desde el nivel de elemento más alto hasta el más bajo.

Título

Descripción donde se visualiza la información correspondiente al título de la página que se encuentra la persona usuaria.

Textos largos

Los niveles que posean un ancho mayor a 256 píxeles se truncarán y agregarán tres puntos (…) al final para visualizar que hay más texto en dicho nivel.

Título

Descripción donde se visualiza la información correspondiente al título de la página que se encuentra la persona usuaria.

Usabilidad

Buenas prácticas

Las migas de pan son efectivas en productos y experiencias que tienen una gran cantidad de contenido organizado en una jerarquía de más de dos niveles. Ocupan poco espacio, pero aun así brindan contexto para el lugar del usuario en la jerarquía de navegación.
Use las de migas de pan cuando necesite ayudar a los usuarios a comprender y moverse entre los múltiples niveles de un sitio web.

Malas prácticas

No utilice el componente de migas de pan en sitios web con una estructura plana, o para mostrar el progreso a través de una transacción o viaje lineal.
Si está utilizando otros elementos de navegación en la página, como una barra lateral, considere si sus usuarios necesitan el soporte adicional de las migas de pan.
Logo del sistema de diseño Obelisco
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative Commons Reconocimiento 2.5 Argentina License.