Navigation Rail

El Riel es una navegación compacta de primer nivel: una columna de íconos grandes con etiqueta en escritorio o una barra inferior en móvil.

Propiedades y configuraciones

Cuando usarlo

Úsalo en servicios con sesión o herramientas de trabajo con 3 a 7 secciones principales a las que la persona vuelve con frecuencia. En móvil, usa la barra inferior para tener esos destinos siempre a mano.

Buenas prácticas

Recomendado: Limita el riel a los destinos principales

Entre 3 y 5 opciones en móvil y hasta 7 en escritorio. Las secundarias van a un submenú o al Drawer.

Recomendado: Escribe etiquetas de una o dos palabras

Cada ícono lleva un texto corto y concreto. La etiqueta explica el destino; el ícono solo lo refuerza.

Recomendado: Usa el submenú para las páginas de la sección

Si una sección tiene varias páginas, muéstralas en el panel de submenú junto al riel, con título y la página actual marcada.

Recomendado: Mantén el mismo orden y destinos

El riel orienta: sus opciones no cambian de posición ni aparecen o desaparecen según la página. Solo cambia la activa.

Malas prácticas

No recomendado: No lo satures de opciones

Muchas opciones diluyen la jerarquía y, en la barra móvil, las etiquetas se truncan hasta volverse ilegibles. Si son más, deja las principales y agrupa el resto en una opción “Más”.

No recomendado: No uses opciones solo con ícono

Sin etiqueta, la persona adivina qué significa cada ícono. Un ícono solo no explica destinos como “Archivo” o “Identidad”.

No recomendado: No dupliques la navegación principal

Repetir las mismas secciones en el riel y en un drawer duplica caminos y confunde sobre cuál es la navegación principal.

Recomendaciones de accesibilidad

Nombra cada región de navegación
El riel y el submenú son elementos <nav>; dales un aria-label distinto (p. ej. “Principal”) o, en el submenú, aria-labelledby apuntando a la etiqueta de la sección activa, como en el ejemplo anidado del kit.

Distingue sección activa y página actual
Usa aria-current="page" en la opción que corresponde a la página visible. En el conjunto anidado, la sección del riel lleva aria-current="true" y la página real se marca en el submenú.

Mantén siempre la etiqueta de texto
La etiqueta visible es el nombre accesible de la opción. Los íconos van con aria-hidden="true"; no dependas de ellos para comunicar el destino.

Relaciona la sección con su submenú
En el conjunto anidado, la sección activa usa aria-controls con el id del panel de submenú para indicar qué contenido controla.

Comunica las opciones deshabilitadas
En enlaces usa aria-disabled="true" (no hay :disabled en <a>) y explica en el contenido por qué no está disponible, en vez de dejar una opción muda.

No dependas solo del color para el estado activo
El fondo de la píldora cambia, y en alto contraste el kit agrega un contorno; acompáñalo con aria-current para que el estado se anuncie.