드롭다운 메뉴

버튼으로 트리거되는 일련의 동작을 나타내는 메뉴예요. Dropdown Menu 프리미티브의 props를 상속받아요.

출처: 문서

본문

버튼으로 트리거되는 일련의 동작을 나타내는 메뉴예요.

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="soft">
      Options
      <DropdownMenu.TriggerIcon />
    </Button>
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

    <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

    <DropdownMenu.Separator />

    <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

    <DropdownMenu.Sub>
      <DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>

      <DropdownMenu.SubContent>
        <DropdownMenu.Item>Move to project…</DropdownMenu.Item>

        <DropdownMenu.Item>Move to folder…</DropdownMenu.Item>

        <DropdownMenu.Separator />

        <DropdownMenu.Item>Advanced options…</DropdownMenu.Item>
      </DropdownMenu.SubContent>
    </DropdownMenu.Sub>

    <DropdownMenu.Separator />

    <DropdownMenu.Item>Share</DropdownMenu.Item>

    <DropdownMenu.Item>Add to favorites</DropdownMenu.Item>

    <DropdownMenu.Separator />

    <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
      Delete
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

API Reference

이 컴포넌트는 Dropdown Menu 프리미티브의 props를 상속받아요.

Root

드롭다운 메뉴의 모든 부분을 담고 있어요.

Trigger

드롭다운 메뉴를 열 컨트롤을 감싸요.

Trigger Icon

선택적인 아이콘 부분이에요.

Content

드롭다운 메뉴가 열렸을 때 튀어나오는 컴포넌트예요.

Prop	Type	Default
`size`	`Responsive<"1" \| "2">`	`"2"`
`variant`	`"solid" \| "soft"`	`"solid"`
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

Label

레이블을 렌더링하는 데 사용해요. 화살표 키로 포커스할 수 없어요.

Item

드롭다운 메뉴 항목을 담고 있는 컴포넌트예요.

Prop	Type	Default
`asChild`	`boolean`	No default value
`color`	`enum`	No default value
`shortcut`	`string`	No default value

Group

여러 Item 부분을 그룹으로 묶는 데 사용해요.

RadioGroup

여러 RadioItem 부분을 그룹으로 묶는 데 사용해요.

RadioItem

제어할 수 있고 라디오처럼 렌더링되는 항목이에요.

Prop	Type	Default
`color`	`enum`	No default value

CheckboxItem

제어할 수 있고 체크박스처럼 렌더링되는 항목이에요.

Prop	Type	Default
`color`	`enum`	No default value
`shortcut`	`string`	No default value

Sub

서브메뉴의 모든 부분을 담고 있어요.

SubTrigger

서브메뉴를 여는 항목이에요. DropdownMenu.Sub 안에 렌더링해야 해요.

SubContent

서브메뉴가 열렸을 때 튀어나오는 컴포넌트예요. DropdownMenu.Sub 안에 렌더링해야 해요.

예제 (Examples)

Size

size prop으로 크기를 제어해요.

<Flex gap="3" align="center">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" size="1">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content size="1">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" size="2">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content size="2">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Flex>

Variant

variant prop으로 드롭다운 메뉴의 시각적 스타일을 커스터마이즈해요.

<Flex gap="3" align="center">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="solid">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content variant="solid">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content variant="soft">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Flex>

Color

color prop으로 특정 color를 지정해요. 시맨틱한 이유(예: 파괴적 동작)로 특정 항목에 color를 전달해 덮어쓸 수도 있어요.

<Flex gap="3">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="indigo">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content variant="soft" color="indigo">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="cyan">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content variant="soft" color="cyan">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="orange">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content variant="soft" color="orange">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="crimson">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content variant="soft" color="crimson">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Grid columns="2" gap="3" display="inline-grid">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button color="gray">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content color="gray">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button color="gray" highContrast>
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content color="gray" highContrast>
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button color="gray" variant="soft">
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content color="gray" variant="soft">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button color="gray" variant="soft" highContrast>
        Options
        <DropdownMenu.TriggerIcon />
      </Button>
    </DropdownMenu.Trigger>

    <DropdownMenu.Content color="gray" variant="soft" highContrast>
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>

      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>

      <DropdownMenu.Separator />

      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Grid>

더 알아보기 (Learn more)

ContextMenu 컴포넌트 — 오른쪽 클릭 메뉴
Dropdown Menu 프리미티브 — 기본 동작 살펴보기

드롭다운 메뉴