Panneau latéral toujours visible, en position fixe. Contrairement à
.sidebar, il ne se masque pas et ne nécessite pas de
JavaScript. Le body reçoit automatiquement une marge
permanente via :has() pour que le contenu ne soit jamais
recouvert.
La sidebar de documentation que vous voyez à gauche de cette page est elle-même une
.sidebar-fixed.sidebar-left.
.sidebar-fixed est un composant purement CSS.
Aucun bouton déclencheur, aucun attribut hidden,
aucune classe .show /
.hide ne sont nécessaires.
La marge sur le body est appliquée dès que
l'élément est présent dans le DOM.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.sidebar-fixed |
<aside> |
Conteneur principal. Position fixe, hauteur pleine page, fond et paddings via variables CSS. Toujours visible — aucune transition, aucun état masqué. |
.sidebar-left |
.sidebar-fixed |
Ancre la sidebar à gauche. Applique left: 0,
une bordure droite et un border-radius côté droit. Le body
reçoit automatiquement margin-left: var(--sidebar-width)
via :has(). |
.sidebar-right |
.sidebar-fixed |
Ancre la sidebar à droite. Applique right: 0,
une bordure gauche et un border-radius côté gauche. Le body
reçoit automatiquement margin-right: var(--sidebar-width)
via :has(). |
La présence de .sidebar-fixed.sidebar-left dans le DOM
suffit à déclencher margin-left: var(--sidebar-width)
sur le body via le sélecteur
:has(). Aucune classe manuelle n'est nécessaire sur
le body. Le même principe s'applique à droite avec
.sidebar-fixed.sidebar-right.
| TOKEN | RÔLE |
|---|---|
--sidebar-width |
Largeur de la sidebar — aussi utilisée comme valeur de marge sur le body |
--sidebar-background-color |
Couleur de fond |
--sidebar-padding-x |
Padding horizontal |
--sidebar-padding-y |
Padding vertical |
--sidebar-border-color |
Couleur de la bordure latérale |
--sidebar-border-style |
Style de la bordure (solid, dashed…) |
--sidebar-border-width |
Épaisseur de la bordure |
--sidebar-border-radius |
Rayon des coins côté intérieur |
Utiliser .sidebar-fixed pour les navigations
persistantes qui ne doivent jamais être masquées : menus de documentation, panneaux d'administration,
barres de navigation applicatives.
Wrapper le contenu principal dans un conteneur avec
padding ou
margin adapté si le
:has() n'est pas disponible dans l'environnement cible
(voir avertissement compatibilité ci-dessous).
La marge automatique sur le body repose sur le
sélecteur CSS :has(). Supporté par tous les navigateurs
modernes, mais absent sur Firefox < 121. Dans ce cas, appliquer manuellement
margin-left ou
margin-right sur le body.
Sidebar Fixed · WEBDEV-UI DOCS / V1