Design SystemComponentsMenu

Menu

Installation

import { Menu } from "@olab/components";

Overview

點擊觸發按鈕後往下展開的動作清單，例如個人選單裡的 Profile、Settings、Sign out。預設觸發元素是一顆小的 secondary Button，展開時呈選中狀態。

每一項是一個動作，點了就執行並收起選單；可以用分隔線分組，也可以停用個別項目。

Interactive Demo

CLICK Open menu — pick any item to log the value

last selected = null

State Matrix

OPEN PANEL — static replica, each item state forced on

Profile default
Settings hover (sim)
Archive disabled
Sign out after separator

Examples

DISABLED ITEM — Archive is not pressable (live)

Spec

PartValueSource class
Triggersecondary Button sm + 品牌色向下箭頭；展開時呈選中Button size=sm skin=secondary active={open}
Panel最小寬 200px，內距 12px，20px 圓角min-w-50 p-3 rounded-2xl border bg-primary
Panel border1pxborder-secondary
Item最小高 36px，左右 8px，圓角 4px，項目間距 4pxmin-h-9 px-2 rounded · gap-1
Item text14px（bodyM）text-bodyM text-primary
Item · hover淡底hover:bg-secondary
Item · disabled淡字，不能點，沒有 hoverdata-[disabled]:text-quaternary
Separator1px 線border-secondary
Placement觸發元素右下方對齊bottom-end

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/menu.md。

Usage

Do

  • 一組相關動作收在一顆按鈕後面：個人選單、列上的「更多」動作。
  • 危險動作（刪除、登出）放在最後並用分隔線隔開。
  • 暫時做不了的動作用 disabled 保留位置，不要整個藏起來。

Don't

  • 不要拿 Menu 讓人「選一個值」；選值請用 Select，它會記住選了什麼。
  • 不要在選單項目裡再放下一層選單或表單。
  • 不要用 className 改面板外觀；浮層外觀應該跟 Popover、Select 一致。