ガイドライン
メニューはドロップダウンの形式でユーザーが特定のオプションを選択するために使用するコンポーネントです。
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | メニューのコンテナ要素 | — | |
| 2 | Section Title | メニュー項目のグループセクションタイトル | 任意 | |
| 3 | Input | メニュー項目のインプットサーチ | 任意 |
Item
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Menu Item | メニューアイテムのコンテナ要素 | — | |
| 2 | Label | メニュー項目にコンテキストを付与するためのテキスト要素 | — | |
| 3 | Icon | ラベルの前 (leading) に配置するアイコン要素 | Icon | 任意 |
| 4 | Shortcut | メニュー項目のキーボードショートカットを示す要素 | 任意 |
Options: 選択肢
isIcon
True
メニューにアイコンを含めるためのオプションです。
False
メニューにアイコンを無効化するオプションです。
isShortcut
True
キーボードショートカットを設定することができます。
ショートカットキーはプロダクト内で一貫した指針を持って設計します。また、OSやブラウザのショートカットと重複することがないように考慮します。
False
キーボードショートカットを無効化するオプションです。
isSectionTitle
True
メニューにはタイトルを表示することができます。タイトルは、2 つ以上のセクションの機能や関係が異なる場合に役立ちます。
False
メニュータイトルを非表示にするオプションです
isFilter
True
メニューにフィルターを表示するオプションです。
False (Default)
メニューのフィルターを非表示にするオプションです。
Default
デフォルトでは、メニュー項目には選択がなく、押すとアクションが実行されます。
Selectable
単一選択メニューの場合、メニュー項目には選択された項目を示す 1 つのチェックマークが表示されます。
Checkable
複数選択メニューの場合、各メニュー項目の横にチェックボックスが表示されます。
Slot
任意のコンポーネントを挿入するためのオプションです。
States: 状態
Enable
ユーザーがメニューを操作する前のデフォルトの状態。
Hover
ユーザーがメニューにマウスオーバーしている状態。
Active
ユーザーがメニューを操作している状態。
Disabled
システムによってメニューが非活性化されている状態。ユーザーによる操作は不能です。
Behaviors: 振る舞い
表示位置
トリガーとメニュー項目は垂直方向に揃います。トリガーとメニューの間は4px開けて配置されます。
セクションタイトルと区切り
同じメニュー内で 2 つ以上のセクションが使用されている場合、セクションごとにタイトルと区切りが表示されます。
Metrics: 寸法
- Vertical Resizing: Fixed
- Horizontal Resizing: Hug
- Item Spacing: 0px
- padding Vertical: 4px
Usage: 使い方
Don’t
アイコンの有無をメニューアイテムごとに変更しないでください。
メニューアイテムのアイコンの有無はメニュー内で統一します。
Contents: 内容
Don’t
メニュー項目は切り捨てが必要なほど長くしないでください。冗長で理解しづらいメニュー項目は認知負荷を及ぼす懸念があります。
Don’t
アイコンの装飾的な使用は避けてください。アイコンを使用する場合はラベルの内容に沿ったアイコンを適用してください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/3/14 | ドキュメントを公開 |
小さな気づきや違和感があれば、
フィードバック