> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Élément de menu

Un élément de menu polyvalent conçu pour être utilisé dans un menu ou une liste de navigation.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { IconBell } from "@tabler/icons-react";
    import { IconAlertCircle } from "@tabler/icons-react";
    import { MenuItem } from "twenty-ui/display";

    export const MyComponent = () => {
      const handleMenuItemClick = (event) => {
        console.log("Menu item clicked!", event);
      };

      const handleButtonClick = (event) => {
        console.log("Icon button clicked!", event);
      };

      return (
        <MenuItem
          LeftIcon={IconBell}
          accent="default"
          text="Menu item text"
          iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
          isTooltipOpen={true}
          testId="menu-item-1"
          onClick={handleMenuItemClick}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés         | Type           | Description                                                                                                    |
    | ------------------ | -------------- | -------------------------------------------------------------------------------------------------------------- |
    | IcôneGauche        | ComposantIcône | Une icône gauche optionnelle affichée avant le texte dans l'élément de menu                                    |
    | accent             | chaîne         | Spécifie la couleur d'accent de l'élément de menu. Les options incluent : `default`, `danger` et `placeholder` |
    | texte              | chaîne         | Le contenu textuel de l'élément de menu                                                                        |
    | boutonsD'icone     | tableau        | Un tableau d'objets représentant des boutons d'icône supplémentaires associés à l'élément de menu              |
    | estInfobulleOuvert | booléen        | Contrôle la visibilité de l'infobulle associée à l'élément de menu                                             |
    | identifiantDeTest  | chaîne         | L'attribut data-testid pour les tests                                                                          |
    | auClique           | fonction       | Fonction de rappel déclenchée lorsque l'élément de menu est cliqué                                             |
    | nomDeClasse        | chaîne         | Nom facultatif pour un style supplémentaire                                                                    |
  </Tab>
</Tabs>

## Variantes

Les différentes variantes du composant d'élément de menu incluent les suivantes :

### Commande

Un élément de menu de style commande dans un menu pour indiquer des raccourcis clavier.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { IconBell } from "@tabler/icons-react";
    import { MenuItemCommand } from "twenty-ui/display";

    export const MyComponent = () => {
      const handleCommandClick = () => {
        console.log("Command clicked!");
      };

      return (
        <MenuItemCommand
          LeftIcon={IconBell}
          text="First Option"
          firstHotKey="⌘"
          secondHotKey="1"
          isSelected={true}
          onClick={handleCommandClick}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés        | Type           | Description                                                                   |
    | ----------------- | -------------- | ----------------------------------------------------------------------------- |
    | LeftIcon          | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
    | texte             | chaîne         | Le contenu texte de l'élément de menu                                         |
    | premierRaccourci  | chaîne         | Le premier raccourci clavier associé à la commande                            |
    | deuxièmeRaccourci | chaîne         | Le deuxième raccourci clavier associé à la commande                           |
    | estSélectionné    | booléen        | Indique si l'élément de menu est sélectionné ou surligné                      |
    | onClick           | fonction       | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu          |
    | nomDeClasse       | chaîne         | Nom facultatif pour un style supplémentaire                                   |
  </Tab>
</Tabs>

### Draggable

Un élément de menu draggable conçu pour être utilisé dans un menu ou une liste où les éléments peuvent être glissés, et des actions supplémentaires peuvent être effectuées via les boutons d'icônes.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { IconBell } from "@tabler/icons-react";
    import { IconAlertCircle } from "@tabler/icons-react";
    import { MenuItemDraggable } from "twenty-ui/display";

    export const MyComponent = () => {
      const handleMenuItemClick = (event) => {
        console.log("Menu item clicked!", event);
      };

      return (
        <MenuItemDraggable
          LeftIcon={IconBell}
          accent="default"
          iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
          isTooltipOpen={false}
          onClick={handleMenuItemClick}
          text="Menu item draggable"
          isDragDisabled={false}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés     | Type           | Description                                                                                        |
    | -------------- | -------------- | -------------------------------------------------------------------------------------------------- |
    | LeftIcon       | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu                      |
    | accent         | chaîne         | La couleur d'accent de l'élément de menu. Elle peut être `défaut`, `placeholder`, et `danger`      |
    | iconButtons    | tableau        | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu |
    | isTooltipOpen  | booléen        | Contrôle la visibilité de l'infobulle associée à l'élément de menu                                 |
    | onClick        | fonction       | Fonction de rappel à déclencher lorsque le lien est cliqué                                         |
    | texte          | chaîne         | Le contenu texte de l'élément de menu                                                              |
    | isDragDisabled | booléen        | Indique si le glissement est désactivé                                                             |
    | nomDeClasse    | chaîne         | Nom facultatif pour un style supplémentaire                                                        |
  </Tab>
</Tabs>

### Sélection multiple

Fournit un moyen d'implémenter une fonctionnalité de sélection multiple avec une case à cocher associée.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { IconBell } from "@tabler/icons-react";
    import { MenuItemMultiSelect } from "twenty-ui/display";

    export const MyComponent = () => {

      return (
        <MenuItemMultiSelect
          LeftIcon={IconBell}
          text="First Option"
          selected={false}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés     | Type           | Description                                                                   |
    | -------------- | -------------- | ----------------------------------------------------------------------------- |
    | LeftIcon       | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
    | texte          | chaîne         | Le contenu texte de l'élément de menu                                         |
    | sélectionné    | booléen        | Indique si l'élément de menu est sélectionné (coché)                          |
    | onSelectChange | fonction       | Fonction de rappel déclenchée lorsque l'état de la case à cocher change       |
    | nomDeClasse    | chaîne         | Nom facultatif pour un style supplémentaire                                   |
  </Tab>
</Tabs>

### Sélection multiple avec avatar

Un élément de menu multi-sélection avec un avatar, une case à cocher pour la sélection, et du contenu textuel.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

    export const MyComponent = () => {
      const imageUrl =
        "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";

      return (
        <MenuItemMultiSelectAvatar
          avatar={<img src={imageUrl} alt="Avatar" />}
          text="First Option"
          selected={false}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés     | Type        | Description                                                             |
    | -------------- | ----------- | ----------------------------------------------------------------------- |
    | avatar         | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu  |
    | texte          | chaîne      | Le contenu texte de l'élément de menu                                   |
    | sélectionné    | booléen     | Indique si l'élément de menu est sélectionné (coché)                    |
    | onSelectChange | fonction    | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
    | nomDeClasse    | chaîne      | Nom facultatif pour un style supplémentaire                             |
  </Tab>
</Tabs>

### Naviguer

Un élément de menu comportant une icône facultative à gauche, un contenu textuel, et une icône de chevron droite.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { IconBell } from "@tabler/icons-react";
    import { MenuItemNavigate } from "twenty-ui/display";

    export const MyComponent = () => {
      const handleNavigation = () => {
        console.log("Navigate to another page");
      };

      return (
        <MenuItemNavigate
          LeftIcon={IconBell}
          text="First Option"
          onClick={handleNavigation}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés  | Type           | Description                                                                   |
    | ----------- | -------------- | ----------------------------------------------------------------------------- |
    | LeftIcon    | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
    | texte       | chaîne         | Le contenu texte de l'élément de menu                                         |
    | onClick     | fonction       | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu        |
    | nomDeClasse | chaîne         | Nom facultatif pour un style supplémentaire                                   |
  </Tab>
</Tabs>

### Sélectionner

Un élément de menu sélectionnable, avec un contenu facultatif à gauche (icône et texte) et un indicateur (icône de coche) pour l'état sélectionné.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { IconBell } from "@tabler/icons-react";
    import { MenuItemSelect } from "twenty-ui/display";

    export const MyComponent = () => {
      const handleSelection = () => {
        console.log("Menu item selected");
      };

      return (
        <MenuItemSelect
          LeftIcon={IconBell}
          text="First Option"
          selected={true}
          disabled={false}
          hovered={false}
          onClick={handleSelection}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés  | Type           | Description                                                                   |
    | ----------- | -------------- | ----------------------------------------------------------------------------- |
    | LeftIcon    | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
    | texte       | chaîne         | Le contenu texte de l'élément de menu                                         |
    | sélectionné | booléen        | Indique si l'élément de menu est sélectionné (coché)                          |
    | désactivé   | booléen        | Indique si l'élément de menu est désactivé                                    |
    | survolé     | booléen        | Indique si l'élément de menu est actuellement survolé                         |
    | onClick     | fonction       | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu        |
    | nomDeClasse | chaîne         | Nom facultatif pour un style supplémentaire                                   |
  </Tab>
</Tabs>

### Sélectionner Avatar

Un élément de menu sélectionnable avec un avatar, avec un contenu facultatif à gauche (avatar et texte) et un indicateur (icône de coche) pour l'état sélectionné.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { MenuItemSelectAvatar } from "twenty-ui/display";

    export const MyComponent = () => {
      const imageUrl =
        "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";

      const handleSelection = () => {
        console.log("Menu item selected");
      };

      return (
        <MenuItemSelectAvatar
          avatar={<img src={imageUrl} alt="Avatar" />}
          text="First Option"
          selected={true}
          disabled={false}
          hovered={false}
          testId="menu-item-test"
          onClick={handleSelection}
          className
        />
      );
    };

    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés  | Type        | Description                                                            |
    | ----------- | ----------- | ---------------------------------------------------------------------- |
    | avatar      | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu |
    | texte       | chaîne      | Le contenu texte de l'élément de menu                                  |
    | sélectionné | booléen     | Indique si l'élément de menu est sélectionné (coché)                   |
    | désactivé   | booléen     | Indique si l'élément de menu est désactivé                             |
    | survolé     | booléen     | Indique si l'élément de menu est actuellement survolé                  |
    | testId      | chaîne      | L'attribut data-testid à des fins de test                              |
    | onClick     | fonction    | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
    | nomDeClasse | chaîne      | Nom facultatif pour un style supplémentaire                            |
  </Tab>
</Tabs>

### Sélection de Couleur

Un élément de menu sélectionnable avec un échantillon de couleur pour les scénarios où vous souhaitez que les utilisateurs choisissent une couleur dans un menu.

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { MenuItemSelectColor } from "twenty-ui/display";

    export const MyComponent = () => {
      const handleSelection = () => {
        console.log("Menu item selected");
      };

      return (
        <MenuItemSelectColor
          color="green"
          selected={true}
          disabled={false}
          hovered={true}
          variant="default"
          onClick={handleSelection}
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés  | Type     | Description                                                                                                                                                                             |
    | ----------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | couleur     | chaîne   | La couleur à thème à afficher comme échantillon dans l'élément de menu. Les options incluent: `vert`, `turquoise`, `ciel`, `bleu`, `violet`, `rose`, `rouge`, `orange`, `jaune`, `gris` |
    | sélectionné | booléen  | Indique si l'élément de menu est sélectionné (coché)                                                                                                                                    |
    | désactivé   | booléen  | Indique si l'élément de menu est désactivé                                                                                                                                              |
    | survolé     | booléen  | Indique si l'élément de menu est actuellement survolé                                                                                                                                   |
    | variante    | chaîne   | La variante de l'échantillon de couleur. Elle peut être `défaut` ou `pipeline`                                                                                                          |
    | onClick     | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu                                                                                                                  |
    | nomDeClasse | chaîne   | Nom facultatif pour un style supplémentaire                                                                                                                                             |
  </Tab>
</Tabs>

### Basculer

Un élément de menu avec un interrupteur à bascule associé pour permettre aux utilisateurs d'activer ou de désactiver une fonctionnalité spécifique

<Tabs>
  <Tab title="Utilisation">
    ```jsx theme={null}
    import { IconBell } from '@tabler/icons-react';

    import { MenuItemToggle } from 'twenty-ui/display';

    export const MyComponent = () => {

      return (
        <MenuItemToggle
          LeftIcon={IconBell}
          text="First Option"
          toggled={true}
          toggleSize="small"
          className
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés            | Type           | Description                                                                   |
    | --------------------- | -------------- | ----------------------------------------------------------------------------- |
    | LeftIcon              | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
    | texte                 | chaîne         | Le contenu texte de l'élément de menu                                         |
    | basculé               | booléen        | Indique si l'interrupteur est en "marche" ou "arrêt".                         |
    | surChangementBasculer | fonction       | Fonction de rappel déclenchée lorsque l'état de l'interrupteur change.        |
    | tailleBasculer        | chaîne         | La taille de l'interrupteur à bascule. Cela peut être soit \\                 |
    | nomDeClasse           | chaîne         | Nom facultatif pour un style supplémentaire                                   |
  </Tab>
</Tabs>