Contenu principal, espacement xs.
Sidebar
À quoi il sert
Sidebar place une barre latérale de largeur fixe à côté d’un contenu qui prend le reste, et les empile si la place manque.
Quand l’utiliser
- Afficher une navigation ou des métadonnées à côté d’un contenu principal.
- Passer en une seule colonne quand la place manque, sans media query.
Quand ne pas l’utiliser
- Pour trois colonnes ou plus de même importance : utiliser Grid.
- Pour une barre qui reste visible pendant le défilement : le composant ne la fixe pas.
Exemples
<Sidebar as="section" side="end" sideWidth="medium" space="l">
<div>Contenu principal</div>
<aside>Barre latérale</aside>
</Sidebar>Variantes
Accessibilité
Clavier
- L’ordre de tabulation suit l’ordre du DOM : le composant ne réordonne pas les enfants.
Lecteur d’écran
- Un aside est lu comme repère complémentaire (rôle complementary).
- Le composant n’ajoute ni rôle ni libellé.
Garanti par le composant
- Espacement par gap, sans marge ajoutée.
- Bascule en colonne par flex-wrap et flex-basis, sans JavaScript.
À la charge de l’intégrateur
- Placer dans le DOM l’ordre de lecture voulu : side ne change que la colonne fixe.
- Nommer les aside et nav de la page si elles sont plusieurs.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| side | "start" | "end" | 'start' | Côté de la barre : `start` = premier enfant, `end` = dernier enfant. |
| space | "xs" | "s" | "m" | "l" | "xl" | 'm' | Espacement entre les enfants (token `--pp-space-*`). |
| sideWidth | "narrow" | "medium" | 'narrow' | Largeur de la colonne latérale avant que les deux colonnes ne s'empilent. |
| as | "div" | "section" | "article" | "main" | "aside" | 'div' | Élément HTML rendu (sémantique de la page). |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-size-measure--pp-space-l--pp-space-m--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- WCAG 1.3.2 Ordre de lecture significatif (niveau A) : ordre visuel égal à l’ordre du DOM.
- WCAG 1.4.10 Reflow (niveau AA) : test sur chaque page construite.
- Tests : packages/astro/test/Sidebar.test.ts, apps/docs/e2e/layout.spec.ts (flex-wrap)
- Code source : packages/astro/src/layout/Sidebar.astro