DSBJ - Design Système du Bénin

Vue d’ensemble

Le composant Vue BjDropdown expose align: 'left' | 'right', direction: 'down' | 'up', size: 'sm' | 'md' | 'lg' et md (défaut down ) comme sur le HTML ci-dessous.

Alignement à gauche (défaut)

Le menu s’aligne sur le bord gauche du trigger ; ouverture vers le bas.

<div class="bj-dropdown" data-bj-dropdown>
  <button type="button" class="bj-btn bj-dropdown__trigger">Menu</button>
  <ul class="bj-dropdown__menu" role="menu">…</ul>
</div>

Alignement à droite

Classe bj-dropdown--right pour ancrer le panneau au bord droit (barres d’outils, menus profil).

<div class="bj-dropdown bj-dropdown--right" data-bj-dropdown>
  <button type="button" class="bj-btn bj-dropdown__trigger">Profil</button>
  <ul class="bj-dropdown__menu" role="menu">…</ul>
</div>

Ouverture vers le bas (défaut)

Sans bj-dropdown--up , le panneau s’ouvre sous le bouton (comportement attendu dans la majorité des formulaires).

<div class="bj-dropdown" data-bj-dropdown>
  <!-- ouverture vers le bas : aucune classe de direction -->
</div>

Ouverture vers le haut

Utile lorsque le trigger est proche du bas de l’écran.

<div class="bj-dropdown bj-dropdown--up" data-bj-dropdown>
  <button type="button" class="bj-btn bj-dropdown__trigger">Vers le haut</button>
  <ul class="bj-dropdown__menu" role="menu">…</ul>
</div>

Combinaison haut + droite

Les modificateurs se cumulent sur bj-dropdown.

<div class="bj-dropdown bj-dropdown--up bj-dropdown--right" data-bj-dropdown>
  …
</div>

Taille compacte (sm)

Réduit la largeur minimale et le padding des entrées.

<div class="bj-dropdown bj-dropdown--sm" data-bj-dropdown>…</div>

Taille médiane (md)

Comportement par défaut : aucune classe de taille (équivalent size: 'md' sur le composant Vue).

<div class="bj-dropdown" data-bj-dropdown>
  <!-- md = défaut, pas de classe de taille -->
</div>

Taille large (lg)

Menu plus large et lignes plus confortables (formulaires denses, libellés longs).

<div class="bj-dropdown bj-dropdown--lg" data-bj-dropdown>…</div>

Référence des classes

Classe / attribut	Description
`bj-dropdown`	Conteneur principal.
`bj-dropdown__trigger`	Bouton déclencheur.
`bj-dropdown__menu`	Liste déroulante.
`data-bj-expanded`	Sur le menu ouvert : requis pour l’animation et display:block (posé par le script ou en démo statique).
`bj-dropdown__item`	Élément de menu.
`bj-dropdown__divider`	Séparateur horizontal.
`bj-dropdown__header`	Titre de groupe dans le menu.
`bj-dropdown--right`	Aligne le menu à droite.
`bj-dropdown--up`	Ouvre le menu vers le haut.
`bj-dropdown--sm`	Variante compacte.
`(aucune classe de taille)`	Largeur et confort par défaut (aucune classe de taille).
`bj-dropdown--lg`	Variante large (min-width et padding accrus).

Navigation clavier

Touche	Comportement
`ArrowDown, ArrowUp, Enter, Space`	Depuis le déclencheur lorsque le menu est fermé : ouvre le menu et place le focus sur le premier élément activable.
`ArrowDown, ArrowUp`	Dans le menu : déplace le focus vers l’élément suivant ou précédent (navigation cyclique).
`Home, End`	Place le focus sur le premier ou le dernier élément du menu.
`Escape`	Ferme le menu et renvoie le focus sur le déclencheur.
`Tab`	Ferme le menu ; le focus suit l’ordre de tabulation habituel (sans renvoi systématique sur le déclencheur).
`Enter, Space`	Sur un élément du menu : déclenche l’action (comportement natif du bouton).

Menu déroulant