Side bar : à quoi sert la barre latérale d’un site ou d’un logiciel ?
Une side bar est la barre latérale, cette colonne étroite posée à côté du contenu principal d’un site, d’une application ou d’un navigateur. Elle sert à orienter (menus, filtres) ou à compléter la lecture (recherche, articles liés).
Sa valeur dépend surtout de l’écran. Dans une application, elle porte la navigation et on ne s’en passe pas ; sur un blog lu au téléphone, elle devient souvent superflue.
Qu’est-ce qu’une side bar, exactement ?
L’Office québécois de la langue française (OQLF) définit la sidebar comme une zone verticale étroite, généralement située à côté de la surface d’affichage principale, et lui préfère « barre latérale ». En un mot ou en deux, « sidebar » et « side bar » désignent la même zone.
Le mot vous paraît nouveau ? Vous connaissez pourtant l’objet sous un autre nom, puisque Firefox parle de « panneau latéral » et que Microsoft traduisait la Windows Sidebar par « Volet Windows ».
Malgré son nom, la barre se place parfois sous la zone principale, selon l’OQLF ; sur smartphone, c’est même souvent là qu’elle atterrit ! On la croise un peu partout :
- sur un site, à côté d’un article ou d’une documentation ;
- dans un logiciel, avec les dossiers du Finder ou d’une messagerie ;
- dans un navigateur, avec le panneau latéral de Firefox ;
- dans WordPress, avec les zones de widgets du thème.
La barre de navigation de l’en-tête et la barre d’outils, elles, s’étirent à l’horizontale, et le bouton « hamburger » ouvre souvent une sidebar repliée. Une side bar se définit par sa fonction, orienter ou compléter, bien davantage que par sa place.
Que met-on dans une barre latérale ?
Deux familles se partagent la colonne. La sidebar de navigation garde à portée de main les espaces d’une application ou d’une documentation, comme les dossiers de Gmail ou le sommaire de MDN. Celle de complément accompagne les blogs et les médias, avec, selon l’OQLF, la recherche, les catégories, les archives ou la biographie de l’auteur.
Sur ordinateur, ces barres restent fixes, deviennent collantes en suivant le défilement, ou se réduisent en icônes. Les blogs y ajoutent articles populaires, lettre d’information, publicité…
| Type de site | Rôle de la barre | Ce qu’on y trouve | Forme courante |
|---|---|---|---|
| Blog ou média | Complément | Recherche, catégories, articles liés, inscription | Fixe ou collante, à droite |
| Boutique en ligne | Filtre | Prix, tailles, marques, notes | À gauche, repliable |
| Documentation (MDN) | Navigation | Liste des pages, sommaire | À gauche, parfois doublée à droite |
| Application (Gmail, Slack, Notion) | Navigation principale | Espaces, dossiers, canaux | À gauche, réductible en icônes |
| Back-office (WordPress) | Navigation | Modules, réglages | À gauche, réductible |
Toutefois, une colonne libre n’oblige pas à la remplir. Une barre latérale mérite sa place quand elle sert la tâche en cours ; remplie de widgets par habitude, elle encombre plus qu’elle n’aide.
Votre colonne de droite affiche un calendrier d’archives que personne n’ouvre ? Il est temps de faire le ménage !
Faut-il garder une sidebar sur mobile ?
Sur un téléphone, deux colonnes n’ont pas la place de cohabiter, et la sidebar prend l’un de ces trois chemins :
- elle descend sous le contenu principal ;
- elle se range dans un tiroir, ouvert par un bouton ;
- elle se réduit à une rangée d’icônes.
Sur un blog, le premier chemin pose problème, car la colonne de droite se retrouve en bas de page, souvent après les commentaires, là où peu de visiteurs descendent. L’inscription, bien en vue sur ordinateur, passe à la trappe !
Google, lui, indexe et classe les pages à partir de leur version mobile, et seul le contenu affiché sur mobile compte. Un site qui sert une version mobile à part et y supprime sa sidebar retire dès lors de l’index les contenus de cette barre, au risque de perdre du trafic. Sur un site responsive, le même HTML sert l’ordinateur et le téléphone, si bien que Google voit toujours la barre et que le risque porte surtout sur la lecture.
Le type de site tranche. Sur un blog ou un média lu surtout au téléphone, ce qui compte doit entrer dans le corps de la page, la sidebar restant réservée à l’ordinateur ; une documentation ou une application garde sa barre, en tiroir ou en icônes.
Prenons un blog d’entreprise fictif, consacré à la paie. Sa colonne de droite affiche une recherche, des catégories, une inscription et trois articles populaires, relégués sous le pied d’article sur smartphone. Après refonte, l’inscription et deux articles liés passent dans le texte, la barre gardant la recherche et les catégories.
Et chez vous, que reste-t-il de la barre latérale sur un téléphone ?
Comment créer une sidebar sur son site ?
Une sidebar propre tient en une quinzaine de lignes, et le soin va surtout au choix de la balise et à l’ordre du code, que lecteurs d’écran et smartphones suivent à la lettre.
Vous codez le site en HTML et CSS
Vous partez d’une page blanche ? L’article va dans <main> et la barre dans <aside>, prévu pour un contenu lié indirectement au contenu principal et annoncé comme zone complémentaire par les lecteurs d’écran.
Le W3C pose deux règles pour ce repère complémentaire. Son contenu doit garder son sens hors de l’article, et plusieurs zones du même type reçoivent chacune un libellé unique (aria-label). Voici la page à deux colonnes :
<div class="page">
<main>
<!-- L'article -->
</main>
<aside aria-label="Pour aller plus loin">
<!-- Compléments -->
</aside>
</div>Le CSS tient ensuite en trois règles.
/* Deux colonnes */
.page { display: grid; grid-template-columns: 1fr 18rem; gap: 2rem; }
/* Barre collante */
aside { position: sticky; top: 1rem; align-self: start; }
/* Une seule colonne sur mobile */
@media (max-width: 48rem) {
.page { grid-template-columns: 1fr; }
}Placé après <main>, le <aside> passe sous l’article sur mobile, et un lecteur d’écran lit l’article en premier. C’est la raison pour laquelle l’ordre du code compte autant que la balise.
Votre site tourne sous WordPress
Un thème classique déclare ses zones de barre latérale par la fonction register_sidebar(), et vous les remplissez dans Apparence > Widgets avec une recherche, des catégories, des articles récents…
Avec un thème à blocs, en revanche, tout se passe dans l’éditeur de site (Apparence > Éditeur), où la barre peut devenir une partie de modèle, comme l’en-tête. Dans les deux cas, un coup d’œil à l’aperçu mobile avant de publier évite de retrouver la barre sous les commentaires.
Pourquoi les navigateurs relancent-ils la barre latérale ?
Côté logiciel, la barre latérale n’a rien de neuf. Windows Vista et Windows 7 avaient leur Volet Windows et ses gadgets, jusqu’à ce que la sécurité s’en mêle !
Les navigateurs l’ont désormais remise au goût du jour. Le panneau latéral de Firefox regroupe marque-pages, historique, onglets synchronisés, onglets verticaux et un chatbot IA au choix, et s’affiche d’un clic sur son bouton dans la barre d’outils.
Sur un écran large, la barre laisse la page visible et place l’assistant juste à côté du texte lu.
Le navigateur est aujourd’hui l’endroit où la barre latérale sert le mieux, à condition de savoir ce qu’on confie à l’assistant. Vous utilisez ce chatbot au bureau ? Avant d’y coller un document interne, mieux vaut vérifier ce que votre entreprise autorise.
Quiz · 4 questions
La barre latérale, vous la maîtrisez ?
Avant d’ajouter ou de garder une side bar, tout se joue sur deux questions, la tâche qu’elle sert et l’écran qui l’affiche. La navigation d’une application ou d’une documentation mérite sa colonne ; les widgets d’un blog font plus d’effet dans le corps de l’article que sous les commentaires.
FAQ - Questions fréquentes
Faut-il placer la barre latérale à gauche ou à droite ?
L’usage place la navigation à gauche dans les applications et les compléments à droite sur les blogs. Sur ordinateur, un test avec de vrais lecteurs vaut néanmoins mieux qu’un modèle copié ; sur mobile, la question disparaît.
Une barre latérale ralentit-elle un site ?
Pas en elle-même. Ce sont ses widgets tiers (publicité, flux de réseaux sociaux, compteurs) qui ajoutent scripts et requêtes, et un inventaire aide à retirer les inutiles.
Peut-on avoir deux barres latérales sur une page ?
Oui, les documentations le font souvent, avec les pages à gauche et le sommaire à droite. Sur mobile, l’une des deux passe en tiroir, et en HTML chaque zone reçoit un libellé unique.
Quelle largeur donner à une sidebar ?
Aucune norme ne la fixe. Assez large pour des libellés lisibles, assez étroite pour laisser la priorité au contenu, elle gagne à être bornée par un minimum et un maximum plutôt que fixée en pourcentage.
L'auteur
Romain Frutos
Consultant SEO · Fondateur d'Extenzilla
Il accompagne depuis 6 ans entreprises et agences sur leur visibilité : SEO technique, stratégie sémantique, netlinking, et désormais visibilité dans les moteurs IA.
