ContextMenu

오른쪽 클릭하거나 길게 누르면 그 자리에 동작 목록이 열려요. 파일이나 목록 항목의 동작에 써요. 버튼을 눌러 여는 메뉴는 DropdownMenu를 써요.

사용 예시

파일 목록

파일을 오른쪽 클릭하면 그 파일의 동작이 열려요. 화살표 키로 항목 사이를 이동하고 Esc로 닫아요.

마지막 동작: 없음

tsx

{files.map(file => (  <ContextMenu key={file}>    <ContextMenuTrigger className="flex items-center gap-2 rounded-r8 px-2 py-1.5">      <FileText className="size-4" />      <span className="text-label">{file}</span>    </ContextMenuTrigger>    <ContextMenuContent>      <ContextMenuItem lead={<Pencil />} trail={<Kbd>F2</Kbd>} onClick={() => rename(file)}>이름 바꾸기</ContextMenuItem>      <ContextMenuItem lead={<Copy />} onClick={() => duplicate(file)}>복제</ContextMenuItem>      <ContextMenuSeparator />      <ContextMenuItem color="danger" lead={<Trash2 />} onClick={() => remove(file)}>지우기</ContextMenuItem>    </ContextMenuContent>  </ContextMenu>))}

회의록.md

권장

같은 동작을 화면에 보이는 버튼으로도 열 수 있어요. ContextMenu는 빨리 쓰는 길이에요.

회의록.md

지양

ContextMenu에만 두면 오른쪽 클릭을 모르는 사람과 키보드만 쓰는 사람은 지울 수 없어요.

보기 설정

빈 곳을 오른쪽 클릭하면 목록 전체에 적용되는 설정을 보여요. 정렬은 라디오 항목, 켜고 끄는 설정은 체크 항목으로 둬요.

빈 곳을 오른쪽 클릭하세요

이름순, 숨긴 파일 숨김

tsx

<ContextMenu>  <ContextMenuTrigger className="frame rounded-r12 h-40 w-full">    빈 곳을 오른쪽 클릭하세요  </ContextMenuTrigger>  <ContextMenuContent>    <ContextMenuGroup label="정렬">      <ContextMenuRadioGroup value={sort} onValueChange={setSort}>        <ContextMenuRadioItem value="name">이름순</ContextMenuRadioItem>        <ContextMenuRadioItem value="updated">최근 수정순</ContextMenuRadioItem>      </ContextMenuRadioGroup>    </ContextMenuGroup>    <ContextMenuSeparator />    <ContextMenuCheckboxItem checked={showHidden} onCheckedChange={setShowHidden}>숨긴 파일 보기</ContextMenuCheckboxItem>  </ContextMenuContent></ContextMenu>

하위 메뉴

같은 동작이 여러 종류로 나뉠 때 써요. DropdownMenu처럼 한 단계만 둬요.

오른쪽 클릭하세요

tsx

<ContextMenu>  <ContextMenuTrigger>...</ContextMenuTrigger>  <ContextMenuContent>    <ContextMenuItem>이름 바꾸기</ContextMenuItem>    <ContextMenuSub>      <ContextMenuSubTrigger>옮기기</ContextMenuSubTrigger>      <ContextMenuSubContent>        <ContextMenuItem>진행 중</ContextMenuItem>        <ContextMenuItem>보관함</ContextMenuItem>      </ContextMenuSubContent>    </ContextMenuSub>  </ContextMenuContent></ContextMenu>

컨트롤

오른쪽 클릭하세요

danger

disabled

tsx

<ContextMenu>  <ContextMenuTrigger className="frame rounded-r12 h-32 w-full">    오른쪽 클릭하세요  </ContextMenuTrigger>  <ContextMenuContent>    <ContextMenuItem>복제</ContextMenuItem>    <ContextMenuSeparator />    <ContextMenuItem>지우기</ContextMenuItem>  </ContextMenuContent></ContextMenu>

명세

이름
이름	값	기본
ContextMenu
open	boolean	-
호출하는 쪽에서 열림 상태를 관리해요.
onOpenChange	(open: boolean, eventDetails) => void	-
열리거나 닫히면 호출돼요.
disabled	boolean	false
true면 오른쪽 클릭해도 열리지 않고 브라우저 메뉴가 열려요.
className	string	-
ContextMenu, ContextMenuSub를 뺀 모든 하위 컴포넌트에 쓸 수 있어요.
ContextMenuTrigger
render	ReactElement	div
기본 요소 대신 그릴 요소예요. 표의 행처럼 다른 요소를 영역으로 쓸 때 넘겨요.
ContextMenuContent
sideOffset	number, 함수	0
기준과 떨어진 거리예요. 단위는 px이에요.
alignOffset	number, 함수	0
align 방향으로 옮기는 거리예요. 단위는 px이에요.
collisionAvoidance	object	-
화면 가장자리에 닿을 때 뒤집을지, 밀어 넣을지 정해요. Base UI Positioner의 값을 그대로 받아요.
ContextMenuItem
color	neutral, danger	neutral
danger면 글자색과 강조됐을 때의 배경색이 바뀌어요.
lead	ReactNode	-
항목 앞에 보여요. 아이콘 크기는 16px로 정해져 있어요.
trail	ReactNode	-
항목 오른쪽 끝에 보여요.
disabled	boolean	false
closeOnClick	boolean	true
false면 누른 뒤에도 메뉴가 열려 있어요.
onClick	(event) => void	-
항목을 누르면 호출돼요.
ContextMenuItemDescription
children	ReactNode	-
항목 이름 아래 짧은 설명이에요. Item, CheckboxItem, RadioItem, SubTrigger 안에 두고, 항목의 aria-describedby로 이어져요.
className	string	-
ContextMenuCheckboxItem
checked	boolean	-
호출하는 쪽에서 체크 상태를 관리해요.
onCheckedChange	(checked: boolean, eventDetails) => void	-
체크 상태가 바뀌면 호출돼요.
disabled	boolean	false
ContextMenuGroup
label	string	-
그룹 위에 보이는 제목이에요.
ContextMenuRadioGroup
value	string	-
호출하는 쪽에서 고른 항목을 관리해요.
onValueChange	(value: string, eventDetails) => void	-
고른 항목이 바뀌면 호출돼요.
ContextMenuRadioItem
value	string	필수
ContextMenuRadioGroup의 value와 같으면 항목 앞에 점이 보여요.
disabled	boolean	false
ContextMenuSub
open	boolean	-
호출하는 쪽에서 열림 상태를 관리해요.
defaultOpen	boolean	false
처음에 열어 둘지 정해요.
onOpenChange	(open: boolean, eventDetails) => void	-
열리거나 닫히면 호출돼요.
ContextMenuSubTrigger
disabled	boolean	false