Sidebar

Définition, exemples et bonnes pratiques

Web

À retenir

  • C'est un élément de navigation vertical placé sur les bords de l'écran.
  • Elle aide à organiser les fonctionnalités secondaires.
  • Elle améliore l'ergonomie si elle est bien structurée.

Une sidebar, ou barre latérale, est une zone d'interface située sur le côté d'une fenêtre de logiciel ou d'une page web. Elle sert de guide ou de boîte à outils, permettant d'accéder à des menus, des raccourcis ou des informations complémentaires sans quitter la page principale du regard.

Étymologie

Vient de l'anglais sidebar, composé de side (côté) et bar (barre). Historiquement utilisée dans le journalisme pour désigner un petit encadré d'information à côté d'un article, elle a été transposée aux interfaces numériques dès l'apparition des premiers systèmes d'exploitation graphiques.

Exemples d'usage

  • Le panneau de gauche dans un service de messagerie (comme Gmail ou Outlook) pour passer de la boîte de réception aux messages envoyés.
  • La colonne de droite sur un blog contenant la liste des derniers articles ou une barre de recherche.
  • L'explorateur de dossiers situé à gauche dans un éditeur de code comme Visual Studio Code.

Cas d'usage

On l'utilise dans le développement d'applications web (dashboards), les sites d'e-commerce pour les filtres de recherche, ou les systèmes d'exploitation pour naviguer dans l'arborescence des fichiers.

Bonnes pratiques

Il est recommandé de rendre la sidebar rétractable (menu "hamburger") sur les petits écrans comme les smartphones pour ne pas masquer le contenu principal. Elle doit rester sobre et ne pas contenir trop d'éléments pour éviter de perdre l'utilisateur.

Synonymes

barre latérale volet latéral panneau de navigation

Antonymes

corps de page en-tête (header) pied de page (footer)

Conseil

Si vous créez un site, ne surchargez pas votre sidebar. Si l'utilisateur doit faire défiler la barre latérale en plus du contenu central, cela risque de créer une confusion visuelle. Privilégiez l'essentiel.

Questions fréquentes

Une sidebar doit-elle forcément être à gauche ?

Non, elle peut être à droite, bien que la gauche soit la norme pour la navigation principale car nous lisons de gauche à droite.

Quelle est la différence entre sidebar et menu ?

Le menu est la liste des liens, tandis que la sidebar est le conteneur physique (la zone) qui peut accueillir ce menu ainsi que d'autres outils comme une barre de recherche.