Navigation Rail
Barra de navegación
Un rail de navegación es una lista vertical corta de lugares principales a lo largo del borde de una pantalla. Es un patrón de diseño común, no un estándar web.
Un ejemplo real
Una aplicación para tabletas tiene cinco destinos principales estables. El rail muestra un ícono, una etiqueta de texto, el lugar actual y un orden de teclado claro. Decenas de destinos anidados necesitan una jerarquía en lugar de un rail sobrecargado.
Partes principales
- 01icono de destino
- 02etiqueta de texto
- 03indicador actual
Úsalo cuando
Usa este término para un conjunto pequeño y estable de lugares de nivel superior en una pantalla mediana o amplia.
No lo uses cuando
No lo uses para etiquetas largas o estructuras profundas. No debe ocupar el espacio necesario para el contenido.
Nombre usado en código
edge navigation + current destination Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Barra de navegación (Navigation Rail). User context: Una aplicación para tabletas tiene cinco destinos principales estables. El rail muestra un ícono, una etiqueta de texto, el lugar actual y un orden de teclado claro. Decenas de destinos anidados necesitan una jerarquía en lugar de un rail sobrecargado. Recommended pattern: Barra de navegación (Navigation Rail). Why it fits: Usa este término para un conjunto pequeño y estable de lugares de nivel superior en una pantalla mediana o amplia. Do not use it when: No lo uses para etiquetas largas o estructuras profundas. No debe ocupar el espacio necesario para el contenido. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Barra de navegación (Navigation Rail) is used now. Definition: Un rail de navegación es una lista vertical corta de lugares principales a lo largo del borde de una pantalla. Es un patrón de diseño común, no un estándar web. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.