MSUB/ui
컴포넌트/Dropdown Menu

Dropdown Menu

컨텍스트 메뉴, 액션 메뉴를 표시하는 드롭다운 컴포넌트입니다.
키보드 네비게이션, 서브메뉴, 단축키 표시 등을 지원합니다.

설치

Terminal
npx @msub-core/ui-cli add dropdown-menu

기본 사용

DropdownMenu와 하위 컴포넌트를 조합하여 사용합니다.

TSX
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@msub-core/ui/components/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">메뉴</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      <Edit className="h-4 w-4 mr-2" />
      수정
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Copy className="h-4 w-4 mr-2" />
      복사
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <Trash2 className="h-4 w-4 mr-2" />
      삭제
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

정렬 (Align)

메뉴의 수평 정렬을 지정할 수 있습니다.

단축키 표시

shortcut prop으로 키보드 단축키를 표시할 수 있습니다.

레이블과 그룹

DropdownMenuLabel로 섹션을 구분하고 DropdownMenuGroup으로 그룹화할 수 있습니다.

서브메뉴

DropdownMenuSub를 사용하여 중첩 메뉴를 만들 수 있습니다.

TSX
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>공유</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger icon={<Mail />}>
        이메일로 공유
      </DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Gmail</DropdownMenuItem>
        <DropdownMenuItem>Outlook</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuItem>
      <Copy className="h-4 w-4 mr-2" />
      링크 복사
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

비활성화 아이템

disabled prop으로 특정 아이템을 비활성화할 수 있습니다.

실제 사용 예시

테이블 행 액션 메뉴

컴포넌트 목록

DropdownMenu

루트 컨테이너

DropdownMenuTrigger

메뉴 열기 트리거

DropdownMenuContent

메뉴 내용 컨테이너

DropdownMenuItem

메뉴 아이템

DropdownMenuLabel

섹션 레이블

DropdownMenuSeparator

구분선

DropdownMenuGroup

아이템 그룹

DropdownMenuSub

서브메뉴 컨테이너

DropdownMenuSubTrigger

서브메뉴 트리거