Menu déroulant

Menu contextuel d’actions ou de liens, déclenché par un bouton. Navigation clavier complète avec role="menu" et role="menuitem".

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).