ドロップダウンメニュー

ボタンによってトリガーされる、アクションや機能のセットなどのメニューをユーザーに表示します。

import React from 'react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import {
  HamburgerMenuIcon,
  DotFilledIcon,
  CheckIcon,
  ChevronRightIcon,
} from '@radix-ui/react-icons';
import './styles.css';

const DropdownMenuDemo = () => {
  const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
  const [urlsChecked, setUrlsChecked] = React.useState(false);
  const [person, setPerson] = React.useState('pedro');

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button className="IconButton" aria-label="Customise options">
          <HamburgerMenuIcon />
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>
          <DropdownMenu.Item className="DropdownMenuItem">
            New Tab <div className="RightSlot">⌘+T</div>
          </DropdownMenu.Item>
          <DropdownMenu.Item className="DropdownMenuItem">
            New Window <div className="RightSlot">⌘+N</div>
          </DropdownMenu.Item>
          <DropdownMenu.Item className="DropdownMenuItem" disabled>
            New Private Window <div className="RightSlot">⇧+⌘+N</div>
          </DropdownMenu.Item>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger className="DropdownMenuSubTrigger">
              More Tools
              <div className="RightSlot">
                <ChevronRightIcon />
              </div>
            </DropdownMenu.SubTrigger>
            <DropdownMenu.Portal>
              <DropdownMenu.SubContent
                className="DropdownMenuSubContent"
                sideOffset={2}
                alignOffset={-5}
              >
                <DropdownMenu.Item className="DropdownMenuItem">
                  Save Page As… <div className="RightSlot">⌘+S</div>
                </DropdownMenu.Item>
                <DropdownMenu.Item className="DropdownMenuItem">Create Shortcut…</DropdownMenu.Item>
                <DropdownMenu.Item className="DropdownMenuItem">Name Window…</DropdownMenu.Item>
                <DropdownMenu.Separator className="DropdownMenu.Separator" />
                <DropdownMenu.Item className="DropdownMenuItem">Developer Tools</DropdownMenu.Item>
              </DropdownMenu.SubContent>
            </DropdownMenu.Portal>
          </DropdownMenu.Sub>

          <DropdownMenu.Separator className="DropdownMenuSeparator" />

          <DropdownMenu.CheckboxItem
            className="DropdownMenuCheckboxItem"
            checked={bookmarksChecked}
            onCheckedChange={setBookmarksChecked}
          >
            <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Show Bookmarks <div className="RightSlot">⌘+B</div>
          </DropdownMenu.CheckboxItem>
          <DropdownMenu.CheckboxItem
            className="DropdownMenuCheckboxItem"
            checked={urlsChecked}
            onCheckedChange={setUrlsChecked}
          >
            <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Show Full URLs
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.Separator className="DropdownMenuSeparator" />

          <DropdownMenu.Label className="DropdownMenuLabel">People</DropdownMenu.Label>
          <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
            <DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="pedro">
              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
                <DotFilledIcon />
              </DropdownMenu.ItemIndicator>
              Pedro Duarte
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="colm">
              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
                <DotFilledIcon />
              </DropdownMenu.ItemIndicator>
              Colm Tuite
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>

          <DropdownMenu.Arrow className="DropdownMenuArrow" />
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

export default DropdownMenuDemo;

特徴

制御することも、制御しないことも可能です。

設定可能な読み取り方向を持つサブメニューをサポートします。

アイテム、ラベル、アイテムのグループをサポートします。

オプションで未確定状態を持つ、チェック可能なアイテム（単数または複数）をサポートします。

モーダルモードと非モーダルモードをサポートします。

サイド、アラインメント、オフセット、衝突処理をカスタマイズします。

オプションでポインティング矢印を描画します。

フォーカスは完全に管理されます。

完全なキーボードナビゲーション。

タイプアヘッドをサポートします。

ディスミッシングとレイヤリングの動作は高度にカスタマイズ可能です。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-dropdown-menu

構成

すべてのパーツをインポートして組み合わせます。

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

export default () => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger />

    <DropdownMenu.Portal>
      <DropdownMenu.Content>
        <DropdownMenu.Label />
        <DropdownMenu.Item />

        <DropdownMenu.Group>
          <DropdownMenu.Item />
        </DropdownMenu.Group>

        <DropdownMenu.CheckboxItem>
          <DropdownMenu.ItemIndicator />
        </DropdownMenu.CheckboxItem>

        <DropdownMenu.RadioGroup>
          <DropdownMenu.RadioItem>
            <DropdownMenu.ItemIndicator />
          </DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>

        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger />
          <DropdownMenu.Portal>
            <DropdownMenu.SubContent />
          </DropdownMenu.Portal>
        </DropdownMenu.Sub>

        <DropdownMenu.Separator />
        <DropdownMenu.Arrow />
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);

API リファレンス

ルート

ドロップダウンメニューのすべてのパーツが含まれます。

プロパティ	タイプ	デフォルト
`defaultOpen`	`boolean`	デフォルト値なし
`open`	`boolean`	デフォルト値なし
`onOpenChange`	`function`	デフォルト値なし
`modal`	`boolean`	`true`
`dir`	`enum`	デフォルト値なし

トリガー

ドロップダウンメニューを切り替えるボタン。デフォルトでは、DropdownMenu.Content はトリガーに対して位置合わせされます。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効の場合に表示

ポータル

使用すると、コンテンツ部分をbodyにポータルします。

プロパティ	タイプ	デフォルト
`forceMount`	`boolean`	デフォルト値なし
`container`	`HTMLElement`	`document.body`

コンテンツ

ドロップダウンメニューが開いたときにポップアップするコンポーネント。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`loop`	`boolean`	`false`
`onCloseAutoFocus`	`function`	デフォルト値なし
`onEscapeKeyDown`	`function`	デフォルト値なし
`onPointerDownOutside`	`function`	デフォルト値なし
`onFocusOutside`	`function`	デフォルト値なし
`onInteractOutside`	`function`	デフォルト値なし
`forceMount`	`boolean`	デフォルト値なし
`side`	`enum`	`"bottom"`
`sideOffset`	`number`	`0`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`境界`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`"left" \|"right" \|"bottom" \|"top"`
`[data-align]`	`"start" \|"end" \|"center"`
`[data-orientation]`	`"vertical" \|"horizontal"`

CSS 変数	説明
`--radix-dropdown-menu-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された `transform-origin`
`--radix-dropdown-menu-content-available-width`	トリガーと境界エッジの間の残りの幅
`--radix-dropdown-menu-content-available-height`	トリガーと境界線の間の残りの高さ
`--radix-dropdown-menu-trigger-width`	トリガーの幅
`--radix-dropdown-menu-trigger-height`	トリガーの高さ

矢印

ドロップダウンメニューとともに描画するオプションの矢印要素。これは、トリガーとDropdownMenu.Contentを視覚的にリンクさせるのに役立ちます。DropdownMenu.Content内に描画する必要があります。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`幅`	`number`	`10`
`高さ`	`number`	`5`

項目

ドロップダウンメニュー項目を含むコンポーネント。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`disabled`	`boolean`	デフォルト値なし
`onSelect`	`function`	デフォルト値なし
`textValue`	`string`	デフォルト値なし

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`
`[data-highlighted]`	ハイライトされている場合に表示されます
`[data-disabled]`	無効の場合に表示

グループ

複数のDropdownMenu.Itemをグループ化するために使用されます。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

ラベル

ラベルを描画するために使用されます。矢印キーを使用してフォーカスすることはできません。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

CheckboxItem

チェックボックスのように制御および描画できる項目。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`checked`	`boolean \| 'indeterminate'`	デフォルト値なし
`onCheckedChange`	`function`	デフォルト値なし
`disabled`	`boolean`	デフォルト値なし
`onSelect`	`function`	デフォルト値なし
`textValue`	`string`	デフォルト値なし

データ属性	値
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-highlighted]`	ハイライトされている場合に表示されます
`[data-disabled]`	無効の場合に表示

RadioGroup

複数のDropdownMenu.RadioItemをグループ化するために使用されます。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`value`	`string`	デフォルト値なし
`onValueChange`	`function`	デフォルト値なし

RadioItem

ラジオボタンのように制御および描画できる項目。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`value*`	`string`	デフォルト値なし
`disabled`	`boolean`	デフォルト値なし
`onSelect`	`function`	デフォルト値なし
`textValue`	`string`	デフォルト値なし

データ属性	値
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-highlighted]`	ハイライトされている場合に表示されます
`[data-disabled]`	無効の場合に表示

ItemIndicator

親のDropdownMenu.CheckboxItemまたはDropdownMenu.RadioItemがチェックされている場合に描画します。この要素を直接スタイル設定することも、アイコンを入れるためのラッパーとして使用することも、または両方を行うこともできます。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	デフォルト値なし

データ属性	値
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`

セパレーター

ドロップダウンメニューの項目を視覚的に分離するために使用されます。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

サブ

サブメニューのすべての部分が含まれます。

プロパティ	タイプ	デフォルト
`defaultOpen`	`boolean`	デフォルト値なし
`open`	`boolean`	デフォルト値なし
`onOpenChange`	`function`	デフォルト値なし

SubTrigger

サブメニューを開く項目。DropdownMenu.Sub内に描画する必要があります。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`disabled`	`boolean`	デフォルト値なし
`textValue`	`string`	デフォルト値なし

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-highlighted]`	ハイライトされている場合に表示されます
`[data-disabled]`	無効の場合に表示

CSS 変数	説明
`--radix-dropdown-menu-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された `transform-origin`
`--radix-dropdown-menu-content-available-width`	トリガーと境界エッジの間の残りの幅
`--radix-dropdown-menu-content-available-height`	トリガーと境界線の間の残りの高さ
`--radix-dropdown-menu-trigger-width`	トリガーの幅
`--radix-dropdown-menu-trigger-height`	トリガーの高さ

SubContent

サブメニューが開いたときにポップアップするコンポーネント。DropdownMenu.Sub内に描画する必要があります。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`loop`	`boolean`	`false`
`onEscapeKeyDown`	`function`	デフォルト値なし
`onPointerDownOutside`	`function`	デフォルト値なし
`onFocusOutside`	`function`	デフォルト値なし
`onInteractOutside`	`function`	デフォルト値なし
`forceMount`	`boolean`	デフォルト値なし
`sideOffset`	`number`	`0`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`境界`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`"left" \|"right" \|"bottom" \|"top"`
`[data-align]`	`"start" \|"end" \|"center"`
`[data-orientation]`	`"vertical" \|"horizontal"`

例

サブメニュー付き

DropdownMenu.Subをそのパーツと組み合わせて使用することで、サブメニューを作成できます。

<DropdownMenu.Root>
  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content>
      <DropdownMenu.Item>…</DropdownMenu.Item>
      <DropdownMenu.Item>…</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Sub>
        <DropdownMenu.SubTrigger>Sub menu →</DropdownMenu.SubTrigger>
        <DropdownMenu.Portal>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
            <DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
            <DropdownMenu.Arrow />
          </DropdownMenu.SubContent>
        </DropdownMenu.Portal>
      </DropdownMenu.Sub>
      <DropdownMenu.Separator />
      <DropdownMenu.Item>…</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

無効な項目付き

data-disabled属性を介して無効な項目に特別なスタイルを追加できます。

// index.jsx
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import './styles.css';

export default () => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
    <DropdownMenu.Portal>
      <DropdownMenu.Content>
        <DropdownMenu.Item className="DropdownMenuItem" disabled>
          …
        </DropdownMenu.Item>
        <DropdownMenu.Item className="DropdownMenuItem">…</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuItem[data-disabled] {
  color: gainsboro;
}

セパレーター付き

Separator部分を使用して、項目間にセパレーターを追加します。

<DropdownMenu.Root>
  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content>
      <DropdownMenu.Item>…</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item>…</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item>…</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

ラベル付き

Label部分を使用して、セクションにラベルを付けるのに役立てます。

<DropdownMenu.Root>
  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content>
      <DropdownMenu.Label>Label</DropdownMenu.Label>
      <DropdownMenu.Item>…</DropdownMenu.Item>
      <DropdownMenu.Item>…</DropdownMenu.Item>
      <DropdownMenu.Item>…</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

チェックボックス項目付き

CheckboxItem部分を使用して、チェックできる項目を追加します。

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

export default () => {
  const [checked, setChecked] = React.useState(true);

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content>
          <DropdownMenu.Item>…</DropdownMenu.Item>
          <DropdownMenu.Item>…</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.CheckboxItem
            checked={checked}
            onCheckedChange={setChecked}
          >
            <DropdownMenu.ItemIndicator>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Checkbox item
          </DropdownMenu.CheckboxItem>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

ラジオボタン項目付き

RadioGroupとRadioItem部分を使用して、他の項目の中でチェックできる項目を追加します。

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

export default () => {
  const [color, setColor] = React.useState('blue');

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content>
          <DropdownMenu.RadioGroup value={color} onValueChange={setColor}>
            <DropdownMenu.RadioItem value="red">
              <DropdownMenu.ItemIndicator>
                <CheckIcon />
              </DropdownMenu.ItemIndicator>
              Red
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="blue">
              <DropdownMenu.ItemIndicator>
                <CheckIcon />
              </DropdownMenu.ItemIndicator>
              Blue
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="green">
              <DropdownMenu.ItemIndicator>
                <CheckIcon />
              </DropdownMenu.ItemIndicator>
              Green
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

複雑な項目付き

Item部分に画像などの装飾的な要素を追加できます。

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

export default () => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
    <DropdownMenu.Portal>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          <img src="…" />
          Adolfo Hess
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <img src="…" />
          Miyah Myles
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);

コンテンツ/サブコンテンツのサイズを制約する

コンテンツ（またはサブコンテンツ）の幅をトリガー（またはサブトリガー）の幅に一致するように制約したい場合があります。また、その高さをビューポートを超えないように制約したい場合もあります。

これをサポートするために、--radix-dropdown-menu-trigger-widthや--radix-dropdown-menu-content-available-heightなどのいくつかのCSSカスタムプロパティを公開しています。それらを使用してコンテンツの寸法を制約してください。

// index.jsx
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import './styles.css';

export default () => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
    <DropdownMenu.Portal>
      <DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>
        …
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
  width: var(--radix-dropdown-menu-trigger-width);
  max-height: var(--radix-dropdown-menu-content-available-height);
}

原点認識アニメーション

CSSカスタムプロパティ--radix-dropdown-menu-content-transform-originを公開しています。side、sideOffset、align、alignOffset、および衝突に基づいて計算された原点からコンテンツをアニメーション化するために使用します。

// index.jsx
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import './styles.css';

export default () => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
    <DropdownMenu.Portal>
      <DropdownMenu.Content className="DropdownMenuContent">
        …
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

衝突認識アニメーション

data-sideおよびdata-align属性を公開しています。それらの値は、実行時に衝突を反映するように変化します。それらを使用して、衝突および方向認識アニメーションを作成します。

// index.jsx
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import './styles.css';

export default () => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>
    <DropdownMenu.Portal>
      <DropdownMenu.Content className="DropdownMenuContent">
        …
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.DropdownMenuContent[data-side='top'] {
  animation-name: slideUp;
}
.DropdownMenuContent[data-side='bottom'] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

アクセシビリティ

メニューボタンWAI-ARIAデザインパターンに準拠しており、メニュー項目間のフォーカス移動を管理するためにロービングタブインデックスを使用します。

キーボード操作

キー	説明
`スペース`	フォーカスが`DropdownMenu.Trigger`にある場合、ドロップダウンメニューを開き、最初の項目にフォーカスを合わせます。フォーカスが項目にある場合、フォーカスされた項目をアクティブにします。
`Enter`	フォーカスが`DropdownMenu.Trigger`にある場合、ドロップダウンメニューを開き、最初の項目にフォーカスを合わせます。フォーカスが項目にある場合、フォーカスされた項目をアクティブにします。
`ArrowDown`	フォーカスが`DropdownMenu.Trigger`にある場合、ドロップダウンメニューを開きます。フォーカスが項目にある場合、フォーカスを次の項目に移動します。
`ArrowUp`	フォーカスが項目にある場合、フォーカスを前の項目に移動します。
`ArrowRightArrowLeft`	フォーカスが`DropdownMenu.SubTrigger`にある場合、読み取り方向に応じてサブメニューを開閉します。
`Esc`	ドロップダウンメニューを閉じ、フォーカスを `DropdownMenu.Trigger`.

カスタムAPI

プリミティブな部分を独自のコンポーネントに抽象化して、独自のAPIを作成します。

矢印と項目インジケーターを抽象化する

この例では、DropdownMenu.ArrowおよびDropdownMenu.ItemIndicator部分を抽象化します。また、CheckboxItemおよびRadioItemの実装詳細もラップします。

使用法

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
} from './your-dropdown-menu';

export default () => (
  <DropdownMenu>
    <DropdownMenuTrigger>DropdownMenu trigger</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Item</DropdownMenuItem>
      <DropdownMenuLabel>Label</DropdownMenuLabel>
      <DropdownMenuGroup>Group</DropdownMenuGroup>
      <DropdownMenuCheckboxItem>CheckboxItem</DropdownMenuCheckboxItem>
      <DropdownMenuSeparator>Separator</DropdownMenuSeparator>
      <DropdownMenuRadioGroup>
        <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
        <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </DropdownMenuContent>
  </DropdownMenu>
);

実装

// your-dropdown-menu.jsx
import React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { CheckIcon, DividerHorizontalIcon } from '@radix-ui/react-icons';

export const DropdownMenu = DropdownMenuPrimitive.Root;
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

export const DropdownMenuContent = React.forwardRef(
  ({ children, ...props }, forwardedRef) => {
    return (
      <DropdownMenuPrimitive.Portal>
        <DropdownMenuPrimitive.Content {...props} ref={forwardedRef}>
          {children}
          <DropdownMenuPrimitive.Arrow />
        </DropdownMenuPrimitive.Content>
      </DropdownMenuPrimitive.Portal>
    );
  }
);

export const DropdownMenuLabel = DropdownMenuPrimitive.Label;
export const DropdownMenuItem = DropdownMenuPrimitive.Item;
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;

export const DropdownMenuCheckboxItem = React.forwardRef(
  ({ children, ...props }, forwardedRef) => {
    return (
      <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
        {children}
        <DropdownMenuPrimitive.ItemIndicator>
          {props.checked === 'indeterminate' && <DividerHorizontalIcon />}
          {props.checked === true && <CheckIcon />}
        </DropdownMenuPrimitive.ItemIndicator>
      </DropdownMenuPrimitive.CheckboxItem>
    );
  }
);

export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

export const DropdownMenuRadioItem = React.forwardRef(
  ({ children, ...props }, forwardedRef) => {
    return (
      <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
        {children}
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon />
        </DropdownMenuPrimitive.ItemIndicator>
      </DropdownMenuPrimitive.RadioItem>
    );
  }
);

export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;

前へダイアログ

次へフォーム

このページをGitHubで編集。

概要

ガイド

コンポーネント

ユーティリティ

ドロップダウンメニュー

特徴

使用法

実装