> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/overlays.md).

# Overlay

{% hint style="info" icon="figma" %}
Nom du composant : **overlayList**
{% endhint %}

***

{% tabs %}
{% tab title="Liste" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=4832-4147&page-id=4832:4146&scaling=min-zoom&starting-point-node-id=4832:4147&t=dQI9gGJ5sSfAW7Sw-1&viewport=176,306,0.4>" %}
{% endtab %}

{% tab title="Filtre de couleur" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=4832-4513&page-id=4832:4146&scaling=min-zoom&starting-point-node-id=4832:4513&t=dQI9gGJ5sSfAW7Sw-1&viewport=176,306,0.4>" %}
{% endtab %}

{% tab title="Filtre texte" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=4832-4637&page-id=4832:4146&scaling=min-zoom&starting-point-node-id=4832:4637&t=dQI9gGJ5sSfAW7Sw-1&viewport=176,306,0.4>" %}
{% endtab %}
{% endtabs %}

***

### Principes

#### Ancré

L'overlay menu est toujours rattaché visuellement à l'élément qui l'a déclenché. Il s'ouvre à proximité immédiate de son déclencheur — en dessous, au-dessus ou sur le côté — de sorte que l'utilisateur comprend instantanément la relation entre les deux.

#### Éphémère

L'overlay menu n'existe que le temps d'un choix. Il se ferme dès qu'une option est sélectionnée, que l'utilisateur appuie sur Échap, ou qu'il clique en dehors. Sa présence dans l'interface est toujours temporaire et intentionnelle.

***

### Usage

Les overlay menus apparaissent en surimpression du contenu, déclenchés par une interaction explicite de l'utilisateur — un clic sur un select, un bouton de filtre, ou un champ de formulaire. Ils présentent une liste d'options sans faire quitter la page ni interrompre le flux de navigation.

***

### Composant liés

{% content-ref url="/pages/Q0QfKfFD7wRUzbyMdOmO" %}
[List item](/documentation/components/list-item.md)
{% endcontent-ref %}

{% content-ref url="/pages/G2Oc2aPUhmfhylsr8RqL" %}
[Toggle couleur](/documentation/components/color.md)
{% endcontent-ref %}

{% content-ref url="/pages/i09oXYjIe7ur7DjM66ag" %}
[Toggle filtre](/documentation/components/text.md)
{% endcontent-ref %}