Ficha
- Categoría
- Navigation
- Nivel
- organismo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 393:9802
- Fuente
design-system/componentes/Rail.md
Rail de navegación izquierdo del AppShell/Principal: logo Aithu, las cinco secciones como RailItem (ícono + palabra, exactamente una activa) y «Mi cuenta» como Avatar abajo (abre el menú de perfil). 84 de ancho; el alto sigue al viewport.
Cuándo usarlo
- Todas las pantallas del shell principal.
Cuándo NO usarlo
- Shells de foco (paso, evaluación, simulación) y Acceso: no hay rail.
Anatomía
<nav> 84 de ancho, padding vertical 12, space-between: arriba logo 56 + lista de 5 RailItem (gap 8); abajo botón «Mi cuenta» con Avatar brand md.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
activa | — (una instancia activa) | id de sección: inicio · aprender · practicar · evaluarme · mi-avance | — |
iniciales | — (Avatar expuesto) | 2 letras | — |
onCuenta | — | abre el menú de perfil | — |
Estados
Sin estados propios.
Accesibilidad
- Landmark nav con nombre «Secciones»; los ítems son enlaces con aria-current en el activo; el avatar es un botón «Mi cuenta» con menú; el logo es decorativo (el título de la página nombra la app).
Contenido
Nombres de sección fijos: Inicio · Aprender · Practicar · Evaluarme · Mi avance. Sin barra inferior (P19–P21).
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).