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

# メニュー項目

メニューまたはナビゲーションリストで使用するために設計された汎用性の高いメニュー項目です。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ         | タイプ         | 説明                                                                   |
    | ------------- | ----------- | -------------------------------------------------------------------- |
    | 左アイコン         | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン                                       |
    | アクセント         | string      | メニュー項目のアクセントカラーを指定します。 オプションは `default`、`danger`、`placeholder` を含みます |
    | テキスト          | string      | メニュー項目のテキスト内容                                                        |
    | アイコンボタン       | 配列          | メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列                                    |
    | ツールチップオープンフラグ | ブール型        | メニュー項目に関連するツールチップの表示状態を制御する                                          |
    | テストID         | string      | テスト目的のためのdata-testid属性                                               |
    | onClick       | 関数          | メニュー項目がクリックされたときにトリガーされるコールバック関数                                     |
    | className     | string      | 追加スタイル用のオプション名                                                       |
  </Tab>
</Tabs>

## バリエーション

メニュー項目コンポーネントの異なるバリエーションには以下が含まれます:

### コマンド

キーボードショートカットを示すためのメニュー内のコマンド形式のメニュー項目。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ        | タイプ         | 説明                               |
    | ------------ | ----------- | -------------------------------- |
    | 左アイコン        | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン   |
    | テキスト         | string      | メニュー項目のテキスト内容                    |
    | firstHotKey  | string      | コマンドに関連する最初のキーボードショートカット         |
    | secondHotKey | string      | コマンドに関連する2番目のキーボードショートカット        |
    | isSelected   | ブール型        | メニュー項目が選択またはハイライトされているかどうかを示します  |
    | onClick      | 関数          | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
    | className    | string      | 追加スタイル用のオプション名                   |
  </Tab>
</Tabs>

### ドラッグ可能

メニューまたはリスト内で項目をドラッグし、アイコンボタンを通じて追加のアクションを実行するために設計されたドラッグ可能なメニュー項目コンポーネント。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ          | タイプ         | 説明                                                            |
    | -------------- | ----------- | ------------------------------------------------------------- |
    | 左アイコン          | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン                                |
    | アクセント          | string      | メニュー項目のアクセントカラー。 `default`、`placeholder`、および `danger` のいずれかです |
    | アイコンボタン        | 配列          | メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列                             |
    | ツールチップオープンフラグ  | ブール型        | メニュー項目に関連するツールチップの表示状態を制御します                                  |
    | onClick        | 関数          | リンクがクリックされるとトリガーされるコールバック関数                                   |
    | テキスト           | string      | メニュー項目のテキスト内容                                                 |
    | isDragDisabled | ブール型        | ドラッグが無効かどうかを示します                                              |
    | className      | string      | 追加スタイル用のオプション名                                                |
  </Tab>
</Tabs>

### マルチ選択

関連するチェックボックスを使用してマルチ選択機能を実装する方法を提供します。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ          | タイプ         | 説明                                  |
    | -------------- | ----------- | ----------------------------------- |
    | 左アイコン          | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン      |
    | テキスト           | string      | メニュー項目のテキスト内容                       |
    | selected       | ブール型        | メニュー項目が選択されているかどうかを示します             |
    | onSelectChange | 関数          | チェックボックスの状態が変更されたときにトリガーされるコールバック関数 |
    | className      | string      | 追加スタイル用のオプション名                      |
  </Tab>
</Tabs>

### マルチ選択アバター

選択用のチェックボックスとテキストコンテンツを備えたアバター付きのマルチ選択メニュー項目。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ          | タイプ         | 説明                                  |
    | -------------- | ----------- | ----------------------------------- |
    | avatar         | `ReactNode` | メニュー項目の左側に表示されるアバターまたはアイコン          |
    | テキスト           | string      | メニュー項目のテキスト内容                       |
    | selected       | ブール型        | メニュー項目が選択されているかどうかを示します             |
    | onSelectChange | 関数          | チェックボックスの状態が変更されたときにトリガーされるコールバック関数 |
    | className      | string      | 追加スタイル用のオプション名                      |
  </Tab>
</Tabs>

### ナビゲート

オプションの左アイコン、テキストコンテンツ、および右のチューロマークを特徴とするメニュー項目。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ     | タイプ         | 説明                               |
    | --------- | ----------- | -------------------------------- |
    | 左アイコン     | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン   |
    | テキスト      | string      | メニュー項目のテキスト内容                    |
    | onClick   | 関数          | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
    | className | string      | 追加スタイル用のオプション名                   |
  </Tab>
</Tabs>

### 選択

オプションの左コンテンツ（アイコンとテキスト）と選択状態のインジケーター（チェックアイコン）を備えた選択可能なメニュー項目。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ     | タイプ         | 説明                               |
    | --------- | ----------- | -------------------------------- |
    | 左アイコン     | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン   |
    | テキスト      | string      | メニュー項目のテキスト内容                    |
    | selected  | ブール型        | メニュー項目が選択されているかどうかを示します          |
    | 無効        | ブール型        | メニュー項目が無効かどうかを示します               |
    | hovered   | ブール型        | メニュー項目が現在ホバーされているかどうかを示します       |
    | onClick   | 関数          | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
    | className | string      | 追加スタイル用のオプション名                   |
  </Tab>
</Tabs>

### 選択アバター

アバター付きの選択可能なメニュー項目、オプションの左コンテンツ（アバターとテキスト）および選択状態のためのインジケーター（チェックアイコン）。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ     | タイプ         | 説明                               |
    | --------- | ----------- | -------------------------------- |
    | avatar    | `ReactNode` | メニュー項目の左側に表示されるアバターまたはアイコン       |
    | テキスト      | string      | メニュー項目のテキスト内容                    |
    | selected  | ブール型        | メニュー項目が選択されているかどうかを示します          |
    | 無効        | ブール型        | メニュー項目が無効かどうかを示します               |
    | hovered   | ブール型        | メニュー項目が現在ホバーされているかどうかを示します       |
    | テストID     | string      | テスト目的のためのdata-testid属性           |
    | onClick   | 関数          | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
    | className | string      | 追加スタイル用のオプション名                   |
  </Tab>
</Tabs>

### 色を選択

ユーザーがメニューから色を選択できるシナリオに使用するための、カラーパレットサンプルを備えた選択可能なメニュー項目。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ     | タイプ    | 説明                                                                                                                     |
    | --------- | ------ | ---------------------------------------------------------------------------------------------------------------------- |
    | カラー       | string | メニュー項目にサンプルとして表示されるテーマカラー。 選択肢には、`green`、`turquoise`、`sky`、`blue`、`purple`、`pink`、`red`、`orange`、`yellow`、`gray`があります。 |
    | 選択済み      | ブール型   | メニュー項目が選択されている（チェックされている）かどうかを示します                                                                                     |
    | 無効        | ブール型   | メニュー項目が無効かどうかを示します                                                                                                     |
    | ホバー       | ブール型   | メニュー項目が現在ホバーされているかどうかを示します                                                                                             |
    | バリアント     | string | 色サンプルのバリアント。 `default` または `pipeline` のいずれかです。                                                                         |
    | onClick   | 関数     | メニュー項目がクリックされたときにトリガーされるコールバック関数                                                                                       |
    | className | string | 追加スタイル用のオプション名                                                                                                         |
  </Tab>
</Tabs>

### 切り替え

特定の機能を有効または無効にするためのトグルスイッチが付いたメニュー項目

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ          | タイプ         | 説明                               |
    | -------------- | ----------- | -------------------------------- |
    | 左アイコン          | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン   |
    | テキスト           | string      | メニュー項目のテキスト内容                    |
    | 切り替え済み         | ブール型        | トグルスイッチが「オン」または「オフ」かを示します        |
    | onToggleChange | 関数          | トグルスイッチの状態が変化した際にトリガーされるコールバック関数 |
    | toggleSize     | string      | トグルスイッチのサイズです。 いずれかになります \\      |
    | className      | string      | 追加スタイル用のオプション名                   |
  </Tab>
</Tabs>