컴포넌트
Context Menu
우클릭 시 커서 위치에 뜨는 컨텍스트 메뉴. 화면 경계 클램프로 항상 화면 안에 표시되며, 외부 클릭·ESC·스크롤 시 닫힙니다. 방향키(위/아래/Home/End) 내비게이션, Enter/Space 선택, aria-menu 접근성, 구분선·비활성·위험 항목·단축키 표기를 지원합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ContextMenu-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | ContextMenuItem[] | 기본 8개 항목(뒤로/새로고침/복사/붙여넣기/저장/삭제 등) | 메뉴에 노출할 항목 목록. 각 항목은 id, label, icon, shortcut, divider, disabled, danger를 가질 수 있습니다. |
| children | ReactNode | undefined | 우클릭 대상이 되는 영역 안에 렌더할 콘텐츠. |
| onSelect | (item: ContextMenuItem) => void | undefined | 항목 선택 시 호출되는 콜백(구분선/비활성 항목 제외). |
| className | string | undefined | 우클릭 대상 영역 래퍼에 적용할 CSS 클래스. |