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

# Elemento del menú

Un elemento de menú versátil diseñado para ser utilizado en un menú o lista de navegación.

<Tabs>
  <Tab title="Uso">
    ```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="Props">
    | Props          | Tipo              | Descripción                                                                                                     |
    | -------------- | ----------------- | --------------------------------------------------------------------------------------------------------------- |
    | IconoIzquierdo | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento de menú                               |
    | acento         | cadena            | Especifica el color de acento del elemento de menú. Las opciones incluyen: `default`, `danger`, y `placeholder` |
    | texto          | cadena            | El contenido de texto del elemento de menú                                                                      |
    | iconButtons    | array             | Una matriz de objetos que representan botones de icono adicionales asociados con el elemento del menú           |
    | isToolTipOpen  | booleano          | Controla la visibilidad del tooltip asociado con el elemento del menú                                           |
    | testId         | cadena            | El atributo data-testid para propósitos de prueba                                                               |
    | alHacerClic    | función           | Función de retorno que se activará cuando se haga clic en el elemento del menú                                  |
    | nombreDeClase  | cadena            | Nombre opcional para el estilo adicional                                                                        |
  </Tab>
</Tabs>

## Variantes

Las diferentes variantes del componente de elemento de menú incluyen las siguientes:

### Comando

Un elemento de menú estilo comando en un menú para indicar atajos de teclado.

<Tabs>
  <Tab title="Uso">
    ```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="Props">
    | Props          | Tipo          | Descripción                                                                        |
    | -------------- | ------------- | ---------------------------------------------------------------------------------- |
    | IconoIzquierdo | IconComponent | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú |
    | texto          | "cadena"      | El contenido de texto del elemento del menú                                        |
    | firstHotKey    | cadena        | El primer atajo de teclado asociado con el comando                                 |
    | secondHotKey   | cadena        | El segundo atajo de teclado asociado con el comando                                |
    | isSelected     | booleano      | Indica si el elemento del menú está seleccionado o resaltado                       |
    | alHacerClic    | función       | Función de retorno que se activará cuando se haga clic en el elemento del menú     |
    | nombreDeClase  | cadena        | Nombre opcional para estilo adicional                                              |
  </Tab>
</Tabs>

### Draggable

Un componente de elemento de menú arrastrable diseñado para ser utilizado en un menú o lista donde los elementos se pueden arrastrar y se pueden realizar acciones adicionales a través de botones de iconos.

<Tabs>
  <Tab title="Uso">
    ```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="Propiedades">
    | Propiedades    | Tipo          | Descripción                                                                                           |
    | -------------- | ------------- | ----------------------------------------------------------------------------------------------------- |
    | IconoIzquierdo | IconComponent | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú                    |
    | accent         | cadena        | El color de acento del elemento del menú. Puede ser `default`, `placeholder` y `danger`               |
    | iconButtons    | matriz        | Una matriz de objetos que representan botones de icono adicionales asociados con el elemento del menú |
    | isTooltipOpen  | booleano      | Controla la visibilidad del tooltip asociado con el elemento del menú                                 |
    | alHacerClic    | función       | Función de devolución de llamada para activar cuando se haga clic en el enlace                        |
    | texto          | cadena        | El contenido de texto del elemento del menú                                                           |
    | isDragDisabled | booleano      | Indica si el arrastre está desactivado                                                                |
    | nombreDeClase  | cadena        | Nombre opcional para estilo adicional                                                                 |
  </Tab>
</Tabs>

### Multi Selección

Proporciona una manera para implementar la funcionalidad de selección múltiple con una casilla de verificación asociada.

<Tabs>
  <Tab title="Uso">
    ```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="Props">
    | Props          | Tipo          | Descripción                                                                                     |
    | -------------- | ------------- | ----------------------------------------------------------------------------------------------- |
    | LeftIcon       | IconComponent | Un icono opcional a la izquierda mostrado antes del texto en el elemento del menú               |
    | texto          | cadena        | El contenido de texto del elemento del menú                                                     |
    | selected       | booleano      | Indica si el elemento del menú está seleccionado (marcado)                                      |
    | onSelectChange | función       | Función de devolución de llamada activada cuando el estado de la casilla de verificación cambia |
    | nombreDeClase  | cadena        | Nombre opcional para estilo adicional                                                           |
  </Tab>
</Tabs>

### Multi Selección con Avatar

Un elemento de menú de selección múltiple con un avatar, una casilla para selección y contenido textual.

<Tabs>
  <Tab title="Uso">
    ```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="Propiedades">
    | Propiedades    | Tipo        | Descripción                                                                                     |
    | -------------- | ----------- | ----------------------------------------------------------------------------------------------- |
    | avatar         | `ReactNode` | El avatar o icono que se mostrará en el lado izquierdo del elemento del menú                    |
    | texto          | cadena      | El contenido de texto del elemento del menú                                                     |
    | selected       | booleano    | Indica si el elemento del menú está seleccionado (marcado)                                      |
    | onSelectChange | función     | Función de devolución de llamada activada cuando el estado de la casilla de verificación cambia |
    | nombreDeClase  | cadena      | Nombre opcional para estilo adicional                                                           |
  </Tab>
</Tabs>

### Navegar

Un elemento de menú que presenta un icono opcional a la izquierda, contenido textual y un icono de chevron a la derecha.

<Tabs>
  <Tab title="Uso">
    ```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="Propiedades">
    | Propiedades   | Tipo          | Descripción                                                                                    |
    | ------------- | ------------- | ---------------------------------------------------------------------------------------------- |
    | LeftIcon      | IconComponent | Un icono opcional a la izquierda mostrado antes del texto en el elemento del menú              |
    | texto         | cadena        | El contenido de texto del elemento del menú                                                    |
    | enClic        | función       | Función de devolución de llamada para ser activada cuando se haga clic en el elemento del menú |
    | nombreDeClase | cadena        | Nombre opcional para estilo adicional                                                          |
  </Tab>
</Tabs>

### Seleccionar

Un elemento de menú seleccionable, que presenta contenido opcional a la izquierda (icono y texto) y un indicador (icono de verificación) para el estado seleccionado.

<Tabs>
  <Tab title="Uso">
    ```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="Propiedades">
    | Propiedades   | Tipo          | Descripción                                                                                    |
    | ------------- | ------------- | ---------------------------------------------------------------------------------------------- |
    | LeftIcon      | IconComponent | Un icono opcional a la izquierda mostrado antes del texto en el elemento del menú              |
    | texto         | cadena        | El contenido de texto del elemento del menú                                                    |
    | selected      | booleano      | Indica si el elemento del menú está seleccionado (marcado)                                     |
    | disabled      | booleano      | Indica si el elemento del menú está desactivado                                                |
    | hovered       | booleano      | Indica si el elemento del menú está actualmente siendo sobrevolado                             |
    | enClic        | función       | Función de devolución de llamada para ser activada cuando se haga clic en el elemento del menú |
    | nombreDeClase | cadena        | Nombre opcional para estilo adicional                                                          |
  </Tab>
</Tabs>

### Seleccionar avatar

Un elemento de menú seleccionable con un avatar, que presenta contenido opcional a la izquierda (avatar y texto) y un indicador (icono de verificación) para el estado seleccionado.

<Tabs>
  <Tab title="Uso">
    ```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="Propiedades">
    | Propiedades   | Tipo        | Descripción                                                                    |
    | ------------- | ----------- | ------------------------------------------------------------------------------ |
    | avatar        | `ReactNode` | El avatar o icono que se mostrará en el lado izquierdo del elemento del menú   |
    | texto         | cadena      | El contenido de texto del elemento del menú                                    |
    | seleccionado  | booleano    | Indica si el elemento del menú está seleccionado (marcado)                     |
    | deshabilitado | booleano    | Indica si el elemento del menú está deshabilitado                              |
    | hovered       | booleano    | Indica si el elemento del menú está actualmente siendo sobrevolado             |
    | idPrueba      | cadena      | El atributo data-testid para propósitos de prueba                              |
    | enClic        | función     | Función de retorno que se activará cuando se haga clic en el elemento del menú |
    | nombreDeClase | cadena      | Nombre opcional para estilo adicional                                          |
  </Tab>
</Tabs>

### Seleccionar Color

Un elemento de menú seleccionable con una muestra de color para situaciones donde se desea que los usuarios elijan un color del menú.

<Tabs>
  <Tab title="Uso">
    ```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="Propiedades">
    | Propiedades   | Tipo     | Descripción                                                                                                                                                                                   |
    | ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | color         | cadena   | El color del tema que se mostrará como muestra en el elemento del menú. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris` |
    | seleccionado  | booleano | Indica si el elemento del menú está seleccionado (marcado)                                                                                                                                    |
    | deshabilitado | booleano | Indica si el elemento del menú está deshabilitado                                                                                                                                             |
    | hovered       | booleano | Indica si el elemento del menú está actualmente siendo sobrevolado                                                                                                                            |
    | variante      | cadena   | La variante de la muestra de color. Puede ser `default` o `pipeline`                                                                                                                          |
    | enClic        | función  | Función de retorno que se activará cuando se haga clic en el elemento del menú                                                                                                                |
    | nombreDeClase | cadena   | Nombre opcional para estilo adicional                                                                                                                                                         |
  </Tab>
</Tabs>

### Conmutar

Un elemento de menú con un interruptor de palanca asociado para permitir a los usuarios habilitar o deshabilitar una característica específica

<Tabs>
  <Tab title="Uso">
    ```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="Propiedades">
    | Propiedades     | Tipo            | Descripción                                                                         |
    | --------------- | --------------- | ----------------------------------------------------------------------------------- |
    | IconoIzquierdo  | ComponenteIcono | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú  |
    | texto           | cadena          | El contenido de texto del elemento del menú                                         |
    | conmutado       | booleano        | Indica si el interruptor de palanca está en el estado "encendido" o "apagado"       |
    | cambioConmutado | función         | Función de retorno que se activa cuando el estado del interruptor de palanca cambia |
    | tamañoConmutado | cadena          | El tamaño del interruptor de palanca. Puede ser \\                                  |
    | nombreDeClase   | cadena          | Nombre opcional para estilo adicional                                               |
  </Tab>
</Tabs>