ContextMenu

Workbench 불러오는 중…

Component intent의도와 경계 읽기

DropdownMenu 와 **같은** .axe-dropdown-menu__* 표면·항목·indicator·shortcut·separator 를 재사용한다(새 CSS 없음). 차이는 트리거뿐 — DropdownMenu 는 버튼 클릭으로 트리거 아래에, ContextMenu 는 대상 영역 우클릭으로 커서 위치에 뜬다(그래서 sideOffset 개념이 없다). ContextMenu(Root)·ContextMenuTrigger(우클릭 대상)·ContextMenuContent·ContextMenuItem 를 기본으로, Label·Separator·Shortcut·Checkbox/RadioItem·Sub 를 조합한다.

01기본 (우클릭 영역)tsxfragment

import {  ContextMenu,  ContextMenuTrigger,  ContextMenuContent,  ContextMenuLabel,  ContextMenuItem,  ContextMenuShortcut,  ContextMenuSeparator,} from "@axe/ui";<ContextMenu>  <ContextMenuTrigger asChild>    <div className="card">우클릭 가능한 영역</div>  </ContextMenuTrigger>  <ContextMenuContent>    <ContextMenuLabel>액션</ContextMenuLabel>    <ContextMenuItem onSelect={open}>      열기 <ContextMenuShortcut>⏎</ContextMenuShortcut>    </ContextMenuItem>    <ContextMenuItem onSelect={duplicate}>복제</ContextMenuItem>    <ContextMenuSeparator />    <ContextMenuItem variant="danger" onSelect={remove}>삭제</ContextMenuItem>  </ContextMenuContent></ContextMenu>

02서브메뉴tsxfragment

import {  ContextMenu,  ContextMenuTrigger,  ContextMenuContent,  ContextMenuItem,  ContextMenuSub,  ContextMenuSubTrigger,  ContextMenuSubContent,} from "@axe/ui";<ContextMenu>  <ContextMenuTrigger asChild>    <div className="row">행</div>  </ContextMenuTrigger>  <ContextMenuContent>    <ContextMenuItem onSelect={edit}>편집</ContextMenuItem>    <ContextMenuSub>      <ContextMenuSubTrigger>이동</ContextMenuSubTrigger>      <ContextMenuSubContent>        <ContextMenuItem onSelect={() => moveTo("inbox")}>보관함</ContextMenuItem>        <ContextMenuItem onSelect={() => moveTo("archive")}>아카이브</ContextMenuItem>      </ContextMenuSubContent>    </ContextMenuSub>  </ContextMenuContent></ContextMenu>

이름	타입	필수	기본값	설명
`open`	`boolean`	—	—	열림 상태 (controlled). Radix Root prop.
`onOpenChange`	`(open: boolean) => void`	—	—	열림/닫힘 콜백 (Root).
`modal`	`boolean`	—	`true`	true 면 바깥 스크롤/포커스를 잠금 (Root).
`withPortal`	`boolean`	—	`true`	ContextMenuContent 를 portal 로 띄울지 — overflow:hidden 부모 탈출.
`variant`	`"default" \| "danger"`	—	`"default"`	ContextMenuItem 톤. danger=파괴적 액션의 텍스트/highlighted bg 를 danger 로.
`icon`	`React.ReactNode`	—	—	ContextMenuItem 좌측 아이콘 슬롯 (선택).
`...rest`	`각 Radix ContextMenu.* props`	—	—	Trigger(asChild·우클릭 대상)·Content(collisionPadding)·Item(onSelect/disabled)·CheckboxItem/RadioItem 등 각 파트는 대응 Radix 컴포넌트 props 를 그대로 전파. DropdownMenu 와 달리 sideOffset·Arrow 는 없다(커서 위치 표시).

클래스	안정성	용도
`.axe-dropdown-menu__content`	stable	커서 위치에 뜨는 메뉴 패널 표면(DropdownMenu 와 공유).
`.axe-dropdown-menu__sub-content`	stable	서브메뉴 패널(공유).
`.axe-dropdown-menu__item`	stable	메뉴 항목 row(공유).
`.axe-dropdown-menu__item--danger`	stable	danger 변형 항목(공유).
`.axe-dropdown-menu__label`	stable	그룹 제목(공유).
`.axe-dropdown-menu__separator`	stable	그룹 구분선(공유).
`.axe-dropdown-menu__shortcut`	stable	우측 정렬 단축키 힌트 슬롯(공유).
`.axe-dropdown-menu__item--checkbox`	internal	checkbox 항목 layout 변형(자동 적용).
`.axe-dropdown-menu__item--radio`	internal	radio 항목 layout 변형(자동 적용).
`.axe-dropdown-menu__item--sub-trigger`	internal	서브메뉴 여는 항목 layout(자동 적용).
`.axe-dropdown-menu__item-indicator`	internal	체크/도트 표시 슬롯(Radix ItemIndicator).
`.axe-dropdown-menu__item-icon`	internal	항목 좌측 아이콘 슬롯 span.
`.axe-dropdown-menu__item-label`	internal	항목 가운데 라벨 span.
`.axe-dropdown-menu__sub-chevron`	internal	sub-trigger 우측 chevron 아이콘.

비-React 소비 노트

열림 트리거(우클릭/long-press)·커서 앵커링·항목 하이라이트가 Radix 런타임에 의존해 CSS-only 로는 재현할 수 없다. 표면 스타일은 DropdownMenu 의 .axe-dropdown-menu__* 를 그대로 공유하므로 별도 CSS 토큰이 없다 — 실제 소비는 React 컴포넌트로.

권장

우클릭 컨텍스트가 있는 표면(행·카드·캔버스)에만 붙인다 — 발견성이 낮으니 보조 경로로.
같은 액션을 툴바/DropdownMenu 등 눈에 보이는 경로로도 제공.
항목 의미는 DropdownMenu 와 동일하게 유지(같은 표면·같은 규칙).

지양

유일한 액션 경로로 삼지 말 것 — 우클릭은 터치/키보드 발견성이 낮다.
메뉴에 폼·긴 인터랙티브 컨텐츠를 넣지 말 것.

먼저 보고, 그다음 계약을 읽습니다

예제

Props

.axe-* 클래스 계약

권장 · 지양