Sidebar

Barre latérale

Une région persistante à côté du contenu principal, intégrée à la mise en page et généralement dédiée à la navigation ou à des outils complémentaires.

Avec vos mots

Ce que les gens décrivent

Alias documentés : navigation latérale, rail de navigation, colonne latérale

une navigation qui reste à gauche
une colonne permanente à côté de la page
garder les sections du projet visibles pendant le travail
un menu latéral qui décale le contenu au lieu de le couvrir
une navigation de bureau dans un rail étroit à gauche
une zone fixe pour les dossiers et raccourcis

Essayer

Surfaces attachées à un bord

Comparer les trois comportements

Scénario comparatif partagé : Un espace de travail place une navigation ou des contrôles complémentaires le long d'un bord de l'écran tout en gardant la tâche principale dans son contexte.

Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.

Votre mission

Choisir Chaises dans la navigation persistante des catégories, replier la barre latérale et vérifier que les résultats de mobilier s'adaptent sans perdre le focus.

Cas limite à vérifier

Sous le seuil large, les filtres persistants disparaissent et un menu nommé séparément ouvre une navigation temporaire des catégories pour les mêmes résultats.

Mission

Barre latérale - Sidebar

Choisir Chaises dans la navigation persistante des catégories, replier la barre latérale et vérifier que les résultats de mobilier s'adaptent sans perdre le focus.

État principal : La navigation persistante des catégories occupe une largeur stable près de la même liste de mobilier, marque la catégorie actuelle et ne rend jamais les résultats inertes.

Tout le mobilier

Tous les résultats de mobilier sont affichés.

12 résultats

Mobilier de bureau

Bureau compact
En stock
Chaise réglable
Sur commande

Parties du spécimen

Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.

À utiliser quand

Naviguer entre les sections stables d'un espace de travail
Garder dossiers ou filtres visibles pendant un travail répété

À éviter quand

La surface n'est utile que brièvement
Le contenu restant devient trop étroit ou défile horizontalement

Comparer les concepts proches

Un Volet latéral est temporaire et recouvre le contenu ; une Sidebar reste dans la mise en page, tandis qu'un Bottom sheet est ancré en bas et gère le glissement mobile.

Volet latéral

Bottom sheet est ancré en bas et peut être glissé ; Drawer utilise un bord latéral défini, tandis que Sidebar reste dans la mise en page persistante.

Feuille inférieure

Build pack

Transformer ce concept en prompt utile

Choisissez la tâche et la destination. Les noms techniques restent en anglais.

Que voulez-vous faire ?

CréerModifierRéparer

Où utiliserez-vous le prompt ?Langue du promptLangue de l’interface à construire

Votre objectif

Détails techniques

Comportements

Rester dans la mise en page
La région occupe une place dans la mise en page au lieu de recouvrir temporairement le contenu principal.
S'adapter aux petites largeurs
Sur une petite largeur, la région persistante se replie ou devient une navigation temporaire distincte.

États

Barre latérale développée
Barre latérale développée
Barre latérale compacte
Barre latérale compacte

Transitions d’état

Barre latérale développée → Barre latérale compacte
Le contrôle de repli est activé pendant que la barre persistante est développée.
Barre latérale compacte → Barre latérale développée
Le contrôle de développement est activé pendant que la barre persistante est compacte.

Scénarios de test

Contexte: Une page de résultats de mobilier de bureau affiche la même liste Bureau compact et Chaise réglable pendant que les utilisateurs filtrent la disponibilité et parcourent les catégories sans quitter les résultats.
Mission: Choisir Chaises dans la navigation persistante des catégories, replier la barre latérale et vérifier que les résultats de mobilier s'adaptent sans perdre le focus.
État principal: La navigation persistante des catégories occupe une largeur stable près de la même liste de mobilier, marque la catégorie actuelle et ne rend jamais les résultats inertes.
Cas limite: Sous le seuil large, les filtres persistants disparaissent et un menu nommé séparément ouvre une navigation temporaire des catégories pour les mêmes résultats.

Accessibilité

Role: aside containing a named navigation region
Nom accessible: Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
Focus: Le focus circule normalement entre la barre et le contenu principal ; le repli conserve un contrôle logique focalisé.
Fermeture: Une barre persistante se replie, elle ne se ferme pas ; son équivalent mobile temporaire suit son propre contrat Drawer.
Scroll: Le document et la barre latérale conservent des débordements indépendants et prévisibles. Le contenu fixe ne masque jamais le focus clavier pendant le défilement.
Annonce: La région de navigation possède un nom unique et la destination actuelle utilise aria-current lorsque pertinent.
Clavier: Tab suit l'ordre normal du document
Entrée active liens et contrôle de repli
Aucun piège de focus n'est créé

Bindings

aside with nav
implementationKind
custom
nativeElement
aside with nav
ariaPattern
complementary or navigation region
radixPrimitive
Non applicable
shadcnRecipe
Non applicable
runtimeDependency
Non applicable
packageName
Non applicable
exportName
Non applicable
exactVersion
Non applicable
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Non applicable
validFrom
Non applicable
validUntil
Non applicable
Limite d’équivalence : A persistent sidebar is layout and navigation, not a modal Dialog. A temporary mobile counterpart must be implemented as a separate Drawer behavior.
Vérifier la source du binding

Sources

WAI-ARIA 1.2: Roles Model
W3C WAI · standard · 2026-07-16
Affirmation couverte : Sidebar: normative ARIA role definitions and constraints used to qualify the stated accessible role.
WCAG 2.2: Focus Appearance
W3C WAI · standard · 2026-07-16
Affirmation couverte : Sidebar: WCAG focus appearance requirements used to qualify visible keyboard focus.

Vérifié le 2026-07-16 · rev. 1

Responsable: SkillCodex Editorial
Statut: review
Relecture: Independent editorial review pending
Prochaine revue: 2026-10-16
Publication: Non publiée
Historique: Brouillon initial sourcé du MVP, en attente de relecture indépendante.

Barre latérale - Sidebar

Choisir Chaises dans la navigation persistante des catégories, replier la barre latérale et vérifier que les résultats de mobilier s'adaptent sans perdre le focus.

État principal : La navigation persistante des catégories occupe une largeur stable près de la même liste de mobilier, marque la catégorie actuelle et ne rend jamais les résultats inertes.