下拉與選單

下拉選單處理「次要動作」與「列/卡動作」,但常被拿來藏 primary CTA,危險項也常和一般項混在一起。這章把觸發定位、選單項型態、overflow(⋯)與 primary 動作的分工講清楚。當你要做 ⋯ 選單、右鍵 context menu 或一排動作時,就翻這頁對一下。

這是什麼

Button 觸發的下拉選單;面板 z-index 1000、預設下方對齊;Esc 關閉。

什麼時候用

工作區動作、批次操作等 3–8 項次要選項;危險項置底。

預覽依本指南規則實作
  • 觸發器 aria-expandedaria-haspopup="menu"
  • 危險項置底 + divider + 語意色 danger。

Context menu

這是什麼

右鍵開啟的 context menu,針對列或卡片。

什麼時候用

表格列、看板卡、可編輯區塊的快捷操作;示範以按鈕模擬右鍵。

預覽依本指南規則實作
在此區塊右鍵開啟選單

Overflow menu(⋯)

這是什麼

⋯ overflow 選單:icon-only 觸發的次要動作集合。

什麼時候用

表格列、卡片標題列空間有限時;觸發按鈕需 aria-label。

預覽依本指南規則實作
專案 Alpha

規格速查

項目定稿值
觸發與定位一觸發器對一面板;優先下方左對齊,空間不足 flip,勿超出 viewport
選單項型態一般項、含 icon、divider 分隔、危險項(紅)、disabled
Disabled 項降低對比、不觸發、not-allowed,附說明為何不可用
危險項放選單底部、紅字,與一般項之間加 divider
Context menu右鍵/長按於可操作的列/卡/區塊;空白處不顯示
Overflow menu(⋯)放次要動作,項目 ≤ 8,超過進子選單或 drawer
與 primary CTA分離:primary 在主區,⋯ 只放次要動作
鍵盤↑↓ 移動、Enter 選取、Esc 關閉,勿只靠 hover

常見做錯

做錯正確
把 primary 動作藏進 ⋯ 選單primary 放主區,⋯ 只放次要動作
危險項與一般項無區隔危險項放底部、紅字、加 divider 分隔
選單只能用滑鼠不可鍵盤操作↑↓/Enter/Esc 全鍵盤可達,勿只靠 hover
disabled 項沒說明為何不可用disabled 附說明或 tooltip 交代原因

相關章節