Migas de pan

Diseño Normalizado de Trámites Electrónicos

Inicio

Primeros pasos Primeros pasos

¿Qué es DINTEL?

Diseñadores

Desarrolladores

Recursos

Preguntas frecuentes

Fundamentos Fundamentos

Color

Tipografía

Elevaciones

Espaciado

Retícula

Borde

Radio

Iconografía

Ilustraciones

Animación

Accesibilidad

Tokens de diseño

Contenidos digitales

Visualización de datos

Elementos de interfaz Elementos de interfaz

Módulos

Plantillas

Componentes

Actualizaciones

Contacto

Elementos de interfaz

Componentes

Migas de pan

La miga de pan o breadcrumb se utiliza para ubicar al usuario con relación con la arquitectura de información de la aplicación. Le permite navegar entre los niveles inferiores y superiores de la aplicación.

Vista previa

Usos

Cuándo usar

En productos o plataformas con mucho contenido y diferentes niveles de jerarquía en la información.

En vista tablet y escritorio.

Cuándo no usar

Evitar en productos con un solo nivel de navegación ya que puede confundir y son innecesarias.

En vista móvil.

Comportamiento

El componente breadcrumb te permite siempre acceder a las páginas anteriores.

Cuando tenemos anchos de pantalla muy estrechos la miga de pan cambia por el componente Back Link con el nombre del nivel anterior al que se vuelve para no comprometer su legibilidad.

Estados

Visualización del componente miga de pan en estado por defecto

Default

Hover

Visualización del componente miga de pan en estado enfocado

Focus

Visualización del componente miga de pan en estado presionado

Pressed

Visualización del componente miga de pan en estado actual

Current

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

Es una lista ordenada que facilita saber cuántas migas de pan hay.

Breadcrumbs tiene los atributos aria-label o aria-labelledby.

Breadcrumbs tiene role="navigation" que asegura que sea un hito de navegación reconocido por las tecnologías de asistencia.

El último elemento del breadcrumbs, tiene el atributo aria-current="page".

Las flechas de separación tienen el atributo aria-label.

Cada elemento del breadcrumbs tiene role=”link” excepto el último item que tiene role=”span”

Los elementos del breadcrumb tiene el atributo aria-label.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

Aviso legal

Accesibilidad

Política de Cookies

Contacto

Mapa web