Navigation Rail
Rail de navigation
Un rail de navigation est une courte liste verticale des principaux endroits le long du bord d'un écran. C'est un modèle de conception courant, pas une norme web.
Un vrai exemple
Une application tablette a cinq destinations principales stables. Le rail montre une icône, un label texte, l’emplacement actuel et un ordre de tabulation clair. Des dizaines de destinations imbriquées nécessitent une hiérarchie au lieu d’un rail surchargé.
Parties principales
- 01icône de destination
- 02étiquette de texte
- 03indicateur actuel
Utilisez-le lorsque
Utilisez ce terme pour un petit ensemble stable de lieux de niveau supérieur sur un écran moyen ou large.
Ne l'utilisez pas lorsque
Ne l'utilisez pas pour de longues étiquettes ou des structures profondes. Il ne doit pas prendre l'espace nécessaire au contenu.
Nom utilisé dans le code
edge navigation + current destination Avant d'expédier
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 Rail de navigation (Navigation Rail). User context: Une application tablette a cinq destinations principales stables. Le rail montre une icône, un label texte, l’emplacement actuel et un ordre de tabulation clair. Des dizaines de destinations imbriquées nécessitent une hiérarchie au lieu d’un rail surchargé. Recommended pattern: Rail de navigation (Navigation Rail). Why it fits: Utilisez ce terme pour un petit ensemble stable de lieux de niveau supérieur sur un écran moyen ou large. Do not use it when: Ne l'utilisez pas pour de longues étiquettes ou des structures profondes. Il ne doit pas prendre l'espace nécessaire au contenu. 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): C'est officiel pour cette source. D'autres plateformes ou équipes peuvent utiliser le terme d'une autre manière. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Rail de navigation (Navigation Rail) is used now. Definition: Un rail de navigation est une courte liste verticale des principaux endroits le long du bord d'un écran. C'est un modèle de conception courant, pas une norme 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.