Feedback

DropdownMenu

컨텍스트 메뉴 — sub menu, checkbox/radio item, shortcut 지원.

더보기(···) 버튼, 사용자 메뉴 등에 사용. Radix DropdownMenu 기반 — 키보드 네비, 화살표 sub-menu 진입 표준.

import { DropdownMenu } from "@nxtgen-org/react";

Full demo

Compound + sub + checkbox/radio + shortcut

tsx
<DropdownMenu>
<DropdownMenu.Trigger asChild>
<Button variant="secondary" rightIcon={<ChevronDown size={14} />}>메뉴</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Label>내 계정</DropdownMenu.Label>
<DropdownMenu.Item><User size={14} /> 프로필<DropdownMenu.Shortcut>⌘P</DropdownMenu.Shortcut></DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger>테마</DropdownMenu.SubTrigger>

API

NameTypeDefaultDescription
DropdownMenuRadix Root
.Trigger / .Content / .Item / .Label / .Separator
.CheckboxItem / .RadioGroup / .RadioItem
.Sub / .SubTrigger / .SubContent
.Shortcutspanml-auto 자동 우측 정렬.
.Item destructiveboolean위험 액션 (붉은색).