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

# Entrada de menu

Um item de menu versátil projetado para ser usado em uma lista de menu ou navegação.

<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="Propriedades">
    | Propriedades  | Tipo            | Descrição                                                                                             |
    | ------------- | --------------- | ----------------------------------------------------------------------------------------------------- |
    | LeftIcon      | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu                                   |
    | destaque      | string          | Especifica a cor de destaque do item de menu. As opções incluem: `default`, `danger`, e `placeholder` |
    | texto         | string          | O conteúdo de texto do item de menu                                                                   |
    | botõesDeÍcone | matriz          | Uma matriz de objetos representando botões de ícones adicionais associados ao item de menu            |
    | isTooltipOpen | booleano        | Controla a visibilidade da dica de ferramenta associada ao item de menu                               |
    | testeId       | string          | O atributo data-testid para fins de teste                                                             |
    | onClick       | função          | Função de retorno de chamada disparada quando o item de menu é clicado                                |
    | className     | string          | Nome opcional para estilização adicional                                                              |
  </Tab>
</Tabs>

## Variantes

As diferentes variantes do componente de item de menu incluem o seguinte:

### Comando

Um item de menu no estilo de comando dentro de um menu para indicar atalhos 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="Propriedades">
    | Propriedades          | Tipo            | Descrição                                                              |
    | --------------------- | --------------- | ---------------------------------------------------------------------- |
    | ÍconeEsquerda         | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu    |
    | texto                 | string          | O conteúdo de texto do item de menu                                    |
    | primeiraTeclaDeAtalho | string          | A primeira tecla de atalho associada ao comando                        |
    | segundaTeclaDeAtalho  | string          | A segunda tecla de atalho associada ao comando                         |
    | éSelecionado          | booleano        | Indica se o item de menu está selecionado ou destacado                 |
    | onClick               | função          | Função de retorno de chamada disparada quando o item de menu é clicado |
    | className             | string          | Nome opcional para estilização adicional                               |
  </Tab>
</Tabs>

### Arrastável

Um componente de item de menu arrastável projetado para ser usado em um menu ou lista onde os itens podem ser arrastados e ações adicionais podem ser realizadas através de botões de ícone.

<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="Propriedades">
    | Propriedades   | Tipo            | Descrição                                                                                  |
    | -------------- | --------------- | ------------------------------------------------------------------------------------------ |
    | ÍconeEsquerda  | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu                        |
    | destaque       | string          | A cor de destaque do item de menu. Pode ser `default`, `placeholder`, e `danger`           |
    | botõesDeÍcone  | matriz          | Uma matriz de objetos representando botões de ícones adicionais associados ao item de menu |
    | isTooltipOpen  | booleano        | Controla a visibilidade da dica de ferramenta associada ao item de menu                    |
    | onClick        | função          | Função de retorno de chamada para ser disparada quando o link é clicado                    |
    | texto          | string          | O conteúdo de texto do item de menu                                                        |
    | isDragDisabled | booleano        | Indica se o arrasto está desativado                                                        |
    | className      | string          | Nome opcional para estilização adicional                                                   |
  </Tab>
</Tabs>

### Seleção Múltipla

Proporciona uma maneira de implementar a funcionalidade de seleção múltipla com uma caixa de seleção associada.

<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="Propriedades">
    | Propriedades   | Tipo            | Descrição                                                                       |
    | -------------- | --------------- | ------------------------------------------------------------------------------- |
    | ÍconeEsquerda  | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu             |
    | texto          | string          | O conteúdo de texto do item de menu                                             |
    | selecionado    | booleano        | Indica se o item de menu está selecionado (marcado)                             |
    | aoMudarSeleção | função          | Função de retorno de chamada disparada quando o estado da caixa de seleção muda |
    | className      | string          | Nome opcional para estilização adicional                                        |
  </Tab>
</Tabs>

### Seleção Múltipla Avatar

Um item de menu de seleção múltipla com um avatar, uma caixa de seleção para seleção e conteúdo 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="Propriedades">
    | Propriedades   | Tipo        | Descrição                                                                       |
    | -------------- | ----------- | ------------------------------------------------------------------------------- |
    | avatar         | `ReactNode` | O avatar ou ícone a ser exibido no lado esquerdo do item de menu                |
    | texto          | string      | O conteúdo de texto do item de menu                                             |
    | selecionado    | booleano    | Indica se o item de menu está selecionado (marcado)                             |
    | aoMudarSeleção | função      | Função de retorno de chamada disparada quando o estado da caixa de seleção muda |
    | className      | string      | Nome opcional para estilização adicional                                        |
  </Tab>
</Tabs>

### Navegar

Um item de menu com um ícone opcional à esquerda, conteúdo textual e um ícone de seta à direita.

<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="Propriedades">
    | Propriedades  | Tipo            | Descrição                                                                       |
    | ------------- | --------------- | ------------------------------------------------------------------------------- |
    | ÍconeEsquerda | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu             |
    | texto         | string          | O conteúdo de texto do item de menu                                             |
    | onClick       | função          | Função de retorno de chamada para ser disparada quando o item de menu é clicado |
    | className     | string          | Nome opcional para estilização adicional                                        |
  </Tab>
</Tabs>

### Selecionar

Um item de menu selecionável, com conteúdo esquerdo opcional (ícone e texto) e um indicador (ícone de seleção) para o estado selecionado.

<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="Propriedades">
    | Propriedades  | Tipo            | Descrição                                                                       |
    | ------------- | --------------- | ------------------------------------------------------------------------------- |
    | ÍconeEsquerda | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu             |
    | texto         | string          | O conteúdo de texto do item de menu                                             |
    | selecionado   | booleano        | Indica se o item de menu está selecionado (marcado)                             |
    | desativado    | booleano        | Indica se o item de menu está desativado                                        |
    | pairado       | booleano        | Indica se o item de menu está com o cursor sobre ele no momento                 |
    | onClick       | função          | Função de retorno de chamada para ser disparada quando o item de menu é clicado |
    | className     | string          | Nome opcional para estilização adicional                                        |
  </Tab>
</Tabs>

### Selecionar Avatar

Um item de menu selecionável com um avatar, com conteúdo esquerdo opcional (avatar e texto) e um indicador (ícone de seleção) para o estado selecionado.

<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="Propriedades">
    | Propriedades | Tipo        | Descrição                                                                       |
    | ------------ | ----------- | ------------------------------------------------------------------------------- |
    | avatar       | `ReactNode` | O avatar ou ícone a ser exibido no lado esquerdo do item de menu                |
    | texto        | string      | O conteúdo de texto do item de menu                                             |
    | selecionado  | booleano    | Indica se o item de menu está selecionado (marcado)                             |
    | desativado   | booleano    | Indica se o item de menu está desativado                                        |
    | pairado      | booleano    | Indica se o item de menu está com o cursor sobre ele no momento                 |
    | testeId      | string      | O atributo data-testid para fins de teste                                       |
    | onClick      | função      | Função de retorno de chamada para ser disparada quando o item de menu é clicado |
    | className    | string      | Nome opcional para estilização adicional                                        |
  </Tab>
</Tabs>

### Selecionar Cor

Um item de menu selecionável com uma amostra de cor para cenários onde você deseja que os usuários escolham uma cor em um menu.

<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="Propriedades">
    | Propriedades | Tipo     | Descrição                                                                                                                                                                   |
    | ------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | cor          | string   | A cor do tema a ser exibida como exemplo no item do menu. As opções incluem: `verde`, `turquesa`, `céu`, `azul`, `roxo`, `pink`, `vermelho`, `laranja`, `amarelo` e `cinza` |
    | selecionado  | booleano | Indica se o item de menu está selecionado (marcado)                                                                                                                         |
    | desativado   | booleano | Indica se o item de menu está desativado                                                                                                                                    |
    | pairado      | booleano | Indica se o item de menu está com o cursor sobre ele no momento                                                                                                             |
    | variante     | string   | A variante da amostra de cor. Pode ser `default` ou `pipeline`                                                                                                              |
    | onClick      | função   | Função de retorno de chamada disparada quando o item de menu é clicado.                                                                                                     |
    | className    | string   | Nome opcional para estilização adicional.                                                                                                                                   |
  </Tab>
</Tabs>

### Alternar

Um item de menu com um interruptor associado para permitir que os usuários ativem ou desativem um recurso específico.

<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="Propriedades">
    | Propriedades    | Tipo            | Descrição                                                                                 |
    | --------------- | --------------- | ----------------------------------------------------------------------------------------- |
    | LeftIcon        | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu.                      |
    | texto           | string          | O conteúdo de texto do item de menu.                                                      |
    | alternado       | booleano        | Indica se o interruptor de alternância está no estado "on" ou "off".                      |
    | onToggleChange  | função          | Função de retorno de chamada acionada quando o estado do interruptor de alternância muda. |
    | tamanhoAlternar | string          | O tamanho do interruptor de alternância. Pode ser \\                                      |
    | className       | string          | Nome opcional para estilização adicional                                                  |
  </Tab>
</Tabs>