Barre de navigation horizontale avec gestion du menu responsive. Supporte un bouton toggle pour les petits écrans, un corps de navigation alignable, et une liste de liens collapsible.
Le data-target du bouton toggle doit correspondre
exactement à l'id du .navbar-body.
C'est le mécanisme de collapse qui pilote l'ouverture/fermeture du menu en responsive.
La navbar s'appuie sur des composants déjà documentés séparément : Collapse
pour le toggle responsive, Dropdown pour les menus
déroulants,
et List pour la liste de liens (.navbar-collapse).
Référez-vous à leurs pages de documentation respectives.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.navbar |
<nav> |
Conteneur principal. Applique display: flex,
l'alignement vertical centré, justify-content:
space-between, les paddings et les bordures via variables CSS.
|
.navbar-toggle |
<button> |
Bouton de bascule du menu. Masqué par défaut (display:
none). Affiché automatiquement en responsive via le breakpoint actif.
|
.navbar-body |
<div> |
Corps de la navbar. Occupe toute la largeur disponible (width:
100%). Contient la liste de navigation.
|
.navbar-left / .navbar-start
|
.navbar-body |
Aligne le contenu du corps à gauche (justify-content:
flex-start).
|
.navbar-center |
.navbar-body |
Centre le contenu du corps (justify-content: center).
|
.navbar-right / .navbar-end
|
.navbar-body |
Aligne le contenu du corps à droite (justify-content:
flex-end).
|
.navbar-left-bp / .navbar-start-bp
|
.navbar-body |
Alignement à gauche appliqué uniquement en mode colonne (une fois le breakpoint atteint). N'a aucun effet en affichage horizontal. |
.navbar-center-bp |
.navbar-body |
Alignement centré appliqué uniquement en mode colonne (une fois le breakpoint atteint). N'a aucun effet en affichage horizontal. |
.navbar-right-bp / .navbar-end-bp
|
.navbar-body |
Alignement à droite appliqué uniquement en mode colonne (une fois le breakpoint atteint). N'a aucun effet en affichage horizontal. |
.navbar-collapse |
<ul> |
Liste de liens de navigation. Affichée en ligne par défaut (display:
flex). Passe en colonne en responsive. Gère le gap
et les paddings via variables CSS.
|
Le modificateur s'applique sur .navbar-body pour positionner
horizontalement les liens.
La navbar intègre un système de responsive natif. En dessous de 768px,
le comportement responsive s'active automatiquement sur .navbar.
Des variantes suffixées par breakpoint permettent de déclencher ce comportement à d'autres seuils.
Lorsque le breakpoint est atteint :
.navbar-toggle devient visible..navbar-body passe en flex-direction: column.
.navbar-body[hidden] est masqué (display: none).
.navbar-collapse passe en colonne.-bp prennent
effet (.navbar-center-bp, .navbar-left-bp, .navbar-end-bp…).
Des classes .navbar-{breakpoint} sont générées automatiquement
depuis la map $breakpoints du SCSS. Elles déclenchent le
comportement responsive au seuil correspondant.
Sans suffixe, .navbar active le comportement responsive
sous 768px. Les classes .navbar-{name}
utilisent les valeurs de la map $breakpoints du projet.
| TOKEN | RÔLE |
|---|---|
--navbar-padding-x |
Padding horizontal du wrapper navbar |
--navbar-padding-y |
Padding vertical du wrapper navbar |
--navbar-border-radius |
Rayon des coins du wrapper |
--navbar-border-width |
Épaisseur des bordures |
--navbar-border-style |
Style de bordure (solid, dashed…)
|
--navbar-border-color |
Couleur des bordures |
--navbar-collapse-padding-x |
Padding horizontal de la liste .navbar-collapse |
--navbar-collapse-padding-y |
Padding vertical de la liste .navbar-collapse |
--navbar-collapse-gap |
Espacement entre les items de la liste .navbar-collapse |
| PRATIQUE | DÉTAIL |
|---|---|
aria-expanded |
Posé sur le .navbar-toggle. Mis à jour par le
composant Collapse selon l'état ouvert/fermé du menu.
|
aria-controls |
Lie le bouton toggle à l'id du .navbar-body qu'il contrôle.
|
hidden |
Posé sur .navbar-body en responsive lorsque le menu
est fermé. Masque le contenu aux technologies d'assistance.
|
Élément <nav> |
Utilisez toujours <nav> comme élément racine
pour que les lecteurs d'écran identifient la zone de navigation.
|
Élément <button> |
Utilisez toujours un <button> pour le toggle.
La navigation clavier (Tab, Entrée, Espace) est assurée nativement.
|
Toujours ajouter un id sur le .navbar-body
et faire correspondre la valeur de data-target et aria-controls
du bouton toggle à cet id.
Utiliser <nav> comme élément racine et <ul>
pour la liste de liens. Cette structure sémantique est attendue par les technologies d'assistance.
Ne pas surcharger display sur .navbar-toggle
ou .navbar-body en CSS. Le SCSS gère leur visibilité via
les media queries et l'attribut hidden.
Toute surcharge peut casser le comportement responsive.
Navbar · WEBDEV-UI DOCS / V1