Sidebar Navigation
Navigation latérale
La navigation latérale est une zone latérale avec des liens nommés qui peut rester ouverte ou se replier. Elle regroupe souvent des lieux connexes dans un produit.
Un vrai exemple
Un espace de travail a 18 itinéraires regroupés sous Aperçu, Rapports et Administration. La barre latérale montre les groupes, la page actuelle et une vue plus petite qui conserve les étiquettes. Les actions pour la page actuelle appartiennent à une barre d'outils, et non à la navigation du site.
Parties principales
- 01point de repère de navigation
- 02groupes de destination
- 03état de la page actuelle
Utilisez-le lorsque
Utilisez ce terme lorsqu'un produit nécessite une navigation visible et nommée à travers plusieurs endroits liés.
Ne l'utilisez pas lorsque
N'utilisez pas de barre latérale sur un site simple avec seulement quelques liens principaux. Sur des écrans étroits, prévoyez un tiroir ou une autre petite mise en page.
Nom utilisé dans le code
<nav aria-label=Workspace> grouped links 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 Navigation latérale (Sidebar Navigation). User context: Un espace de travail a 18 itinéraires regroupés sous Aperçu, Rapports et Administration. La barre latérale montre les groupes, la page actuelle et une vue plus petite qui conserve les étiquettes. Les actions pour la page actuelle appartiennent à une barre d'outils, et non à la navigation du site. Recommended pattern: Navigation latérale (Sidebar Navigation). Why it fits: Utilisez ce terme lorsqu'un produit nécessite une navigation visible et nommée à travers plusieurs endroits liés. Do not use it when: N'utilisez pas de barre latérale sur un site simple avec seulement quelques liens principaux. Sur des écrans étroits, prévoyez un tiroir ou une autre petite mise en page. 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): Aucun standard officiel unique ne régit l’ensemble du terme. Sa signification peut varier selon les équipes, plateformes ou frameworks. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Navigation latérale (Sidebar Navigation) is used now. Definition: La navigation latérale est une zone latérale avec des liens nommés qui peut rester ouverte ou se replier. Elle regroupe souvent des lieux connexes dans un produit. 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.