# Dropdown

Dropdown,
DropdownContent,
DropdownItem,
DropdownLabel,
DropdownLinkItem,
DropdownSeparator,
DropdownShortcut,
DropdownSub,
DropdownSubContent,
DropdownSubTrigger,
DropdownTrigger,
} from "@/components/starwind/dropdown";

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownLabel>My Account</DropdownLabel>
    <DropdownSeparator />
    <DropdownItem>Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Help</DropdownItem>
    <DropdownItem disabled>Sign out</DropdownItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <Dropdown>
      <DropdownTrigger asChild>
        <Button>Open Menu</Button>
      </DropdownTrigger>
      <DropdownContent>
        <DropdownLabel>My Account</DropdownLabel>
        <DropdownSeparator />
        <DropdownItem>Profile</DropdownItem>
        <DropdownItem>Settings</DropdownItem>
        <DropdownSeparator />
        <DropdownItem>Help</DropdownItem>
        <DropdownItem disabled>Sign out</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({})" type="button">Open Menu</button>
    </DropdownTrigger>
    <DropdownContent>
      <DropdownLabel>My Account</DropdownLabel>
      <DropdownSeparator />
      <DropdownItem>Profile</DropdownItem>
      <DropdownItem>Settings</DropdownItem>
      <DropdownSeparator />
      <DropdownItem>Help</DropdownItem>
      <DropdownItem disabled>Sign out</DropdownItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add dropdown --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add dropdown --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add dropdown --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownLabel>My Account</DropdownLabel>
    <DropdownSeparator />
    <DropdownItem>Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Help</DropdownItem>
    <DropdownItem disabled>Sign out</DropdownItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <Dropdown>
      <DropdownTrigger asChild>
        <Button>Open Menu</Button>
      </DropdownTrigger>
      <DropdownContent>
        <DropdownLabel>My Account</DropdownLabel>
        <DropdownSeparator />
        <DropdownItem>Profile</DropdownItem>
        <DropdownItem>Settings</DropdownItem>
        <DropdownSeparator />
        <DropdownItem>Help</DropdownItem>
        <DropdownItem disabled>Sign out</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({})" type="button">Open Menu</button>
    </DropdownTrigger>
    <DropdownContent>
      <DropdownLabel>My Account</DropdownLabel>
      <DropdownSeparator />
      <DropdownItem>Profile</DropdownItem>
      <DropdownItem>Settings</DropdownItem>
      <DropdownSeparator />
      <DropdownItem>Help</DropdownItem>
      <DropdownItem disabled>Sign out</DropdownItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Composition

Use this structure for an action menu. Add groups, labels, separators, checkbox items, or radio
items as needed.

```text
Dropdown
├── DropdownTrigger
└── DropdownContent
    ├── DropdownGroup
    │   ├── DropdownLabel
    │   └── DropdownItem or DropdownLinkItem
    ├── DropdownSeparator
    └── DropdownSub
        ├── DropdownSubTrigger
        └── DropdownSubContent
            └── DropdownItem
```

## Action Menu

A common use case is a compact list of application actions. Each `DropdownItem` participates in the Runtime menu's keyboard navigation and selection behavior.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button>Navigation</Button>
  </DropdownTrigger>
  <DropdownContent align="center">
    <DropdownItem>Open dashboard</DropdownItem>
    <DropdownItem>Create project</DropdownItem>
    <DropdownItem>Invite teammate</DropdownItem>
    <DropdownItem>View activity</DropdownItem>
    <DropdownItem>Account settings</DropdownItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Dropdown>
        <DropdownTrigger asChild>
          <Button>Navigation</Button>
        </DropdownTrigger>
        <DropdownContent align="center">
          <DropdownItem>Open dashboard</DropdownItem>
          <DropdownItem>Create project</DropdownItem>
          <DropdownItem>Invite teammate</DropdownItem>
          <DropdownItem>View activity</DropdownItem>
          <DropdownItem>Account settings</DropdownItem>
        </DropdownContent>
      </Dropdown>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({})" type="button">Navigation</button>
    </DropdownTrigger>
    <DropdownContent align="center">
      <DropdownItem>Open dashboard</DropdownItem>
      <DropdownItem>Create project</DropdownItem>
      <DropdownItem>Invite teammate</DropdownItem>
      <DropdownItem>View activity</DropdownItem>
      <DropdownItem>Account settings</DropdownItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Link Items

Use `DropdownItem` for commands in the current interface and `DropdownLinkItem` for navigation. Link items render native anchors, accept normal anchor attributes, and participate in the same keyboard navigation and highlighting as action items.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Dropdown, DropdownTrigger, DropdownContent, DropdownLinkItem } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button variant="outline">Resources</Button>
  </DropdownTrigger>
  <DropdownContent align="center">
    <DropdownLinkItem href="/docs/">Documentation</DropdownLinkItem>
    <DropdownLinkItem href="/docs/getting-started/">Getting started</DropdownLinkItem>
    <DropdownLinkItem href="/docs/components/dropdown/" disabled>
      Disabled destination
    </DropdownLinkItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownLinkItem } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <Dropdown>
      <DropdownTrigger asChild>
        <Button variant="outline">Resources</Button>
      </DropdownTrigger>
      <DropdownContent align="center">
        <DropdownLinkItem href="/docs/">Documentation</DropdownLinkItem>
        <DropdownLinkItem href="/docs/getting-started/">Getting started</DropdownLinkItem>
        <DropdownLinkItem href="/docs/components/dropdown/" disabled>
          Disabled destination
        </DropdownLinkItem>
      </DropdownContent>
    </Dropdown>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownLinkItem,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({ variant: 'outline' })" type="button">
        Resources
      </button>
    </DropdownTrigger>
    <DropdownContent align="center">
      <DropdownLinkItem href="/docs/">Documentation</DropdownLinkItem>
      <DropdownLinkItem href="/docs/getting-started/">Getting started</DropdownLinkItem>
      <DropdownLinkItem href="/docs/components/dropdown/" disabled>
        Disabled destination
      </DropdownLinkItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

Disabled link items omit their `href` and expose the same disabled state as other menu items. `DropdownLinkItem` keeps the menu open by default; set `closeOnClick` when navigation does not unload the current page and the menu should close immediately.

## Hover Open

The dropdown can be configured to open on hover in addition to click.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<Dropdown openOnHover closeDelay={300}>
  <DropdownTrigger asChild>
    <Button>Hover Me</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownLabel>My Account</DropdownLabel>
    <DropdownSeparator />
    <DropdownItem>Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Help</DropdownItem>
    <DropdownItem disabled>Sign out</DropdownItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Dropdown openOnHover closeDelay={300}>
        <DropdownTrigger asChild>
          <Button>Hover Me</Button>
        </DropdownTrigger>
        <DropdownContent>
          <DropdownLabel>My Account</DropdownLabel>
          <DropdownSeparator />
          <DropdownItem>Profile</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownSeparator />
          <DropdownItem>Help</DropdownItem>
          <DropdownItem disabled>Sign out</DropdownItem>
        </DropdownContent>
      </Dropdown>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <Dropdown openOnHover :closeDelay="300">
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({})" type="button">Hover Me</button>
    </DropdownTrigger>
    <DropdownContent>
      <DropdownLabel>My Account</DropdownLabel>
      <DropdownSeparator />
      <DropdownItem>Profile</DropdownItem>
      <DropdownItem>Settings</DropdownItem>
      <DropdownSeparator />
      <DropdownItem>Help</DropdownItem>
      <DropdownItem disabled>Sign out</DropdownItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Submenu

Use `DropdownSub`, `DropdownSubTrigger`, and `DropdownSubContent` to nest secondary actions.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownSeparator,
  DropdownShortcut,
  DropdownSub,
  DropdownSubContent,
  DropdownSubTrigger,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownTrigger>
  <DropdownContent class="min-w-[10rem]">
    <DropdownItem>Team</DropdownItem>
    <DropdownSub>
      <DropdownSubTrigger>Invite users</DropdownSubTrigger>
      <DropdownSubContent>
        <DropdownItem>Email</DropdownItem>
        <DropdownItem>Message</DropdownItem>
        <DropdownSub>
          <DropdownSubTrigger>More options</DropdownSubTrigger>
          <DropdownSubContent>
            <DropdownItem>Calendly</DropdownItem>
            <DropdownItem>Slack</DropdownItem>
            <DropdownSeparator />
            <DropdownItem>Webhook</DropdownItem>
          </DropdownSubContent>
        </DropdownSub>
        <DropdownSeparator />
        <DropdownItem>Advanced...</DropdownItem>
      </DropdownSubContent>
    </DropdownSub>
    <DropdownItem>
      <span>New Team</span>
      <DropdownShortcut>⌘+T</DropdownShortcut>
    </DropdownItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownSeparator,
  DropdownShortcut,
  DropdownSub,
  DropdownSubContent,
  DropdownSubTrigger,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Dropdown>
        <DropdownTrigger asChild>
          <Button variant="outline">Open</Button>
        </DropdownTrigger>
        <DropdownContent className="min-w-[10rem]">
          <DropdownItem>Team</DropdownItem>
          <DropdownSub>
            <DropdownSubTrigger>Invite users</DropdownSubTrigger>
            <DropdownSubContent>
              <DropdownItem>Email</DropdownItem>
              <DropdownItem>Message</DropdownItem>
              <DropdownSub>
                <DropdownSubTrigger>More options</DropdownSubTrigger>
                <DropdownSubContent>
                  <DropdownItem>Calendly</DropdownItem>
                  <DropdownItem>Slack</DropdownItem>
                  <DropdownSeparator />
                  <DropdownItem>Webhook</DropdownItem>
                </DropdownSubContent>
              </DropdownSub>
              <DropdownSeparator />
              <DropdownItem>Advanced...</DropdownItem>
            </DropdownSubContent>
          </DropdownSub>
          <DropdownItem>
            <span>New Team</span>
            <DropdownShortcut>⌘+T</DropdownShortcut>
          </DropdownItem>
        </DropdownContent>
      </Dropdown>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownSeparator,
  DropdownShortcut,
  DropdownSub,
  DropdownSubContent,
  DropdownSubTrigger,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({ variant: 'outline' })" type="button">Open</button>
    </DropdownTrigger>
    <DropdownContent class="min-w-[10rem]">
      <DropdownItem>Team</DropdownItem>
      <DropdownSub>
        <DropdownSubTrigger>Invite users</DropdownSubTrigger>
        <DropdownSubContent>
          <DropdownItem>Email</DropdownItem>
          <DropdownItem>Message</DropdownItem>
          <DropdownSub>
            <DropdownSubTrigger>More options</DropdownSubTrigger>
            <DropdownSubContent>
              <DropdownItem>Calendly</DropdownItem>
              <DropdownItem>Slack</DropdownItem>
              <DropdownSeparator />
              <DropdownItem>Webhook</DropdownItem>
            </DropdownSubContent>
          </DropdownSub>
          <DropdownSeparator />
          <DropdownItem>Advanced...</DropdownItem>
        </DropdownSubContent>
      </DropdownSub>
      <DropdownItem>
        <span>New Team</span>
        <DropdownShortcut>⌘+T</DropdownShortcut>
      </DropdownItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Shortcuts

Add `DropdownShortcut` to display keyboard hints alongside actions.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
  DropdownShortcut,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownLabel>My Account</DropdownLabel>
    <DropdownItem>
      <span>Profile</span>
      <DropdownShortcut>⇧⌘P</DropdownShortcut>
    </DropdownItem>
    <DropdownItem>
      <span>Billing</span>
      <DropdownShortcut>⌘B</DropdownShortcut>
    </DropdownItem>
    <DropdownItem>
      <span>Settings</span>
      <DropdownShortcut>⌘S</DropdownShortcut>
    </DropdownItem>
    <DropdownSeparator />
    <DropdownItem>
      <span>Log out</span>
      <DropdownShortcut>⇧⌘Q</DropdownShortcut>
    </DropdownItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
  DropdownShortcut,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Dropdown>
        <DropdownTrigger asChild>
          <Button variant="outline">Open</Button>
        </DropdownTrigger>
        <DropdownContent>
          <DropdownLabel>My Account</DropdownLabel>
          <DropdownItem>
            <span>Profile</span>
            <DropdownShortcut>⇧⌘P</DropdownShortcut>
          </DropdownItem>
          <DropdownItem>
            <span>Billing</span>
            <DropdownShortcut>⌘B</DropdownShortcut>
          </DropdownItem>
          <DropdownItem>
            <span>Settings</span>
            <DropdownShortcut>⌘S</DropdownShortcut>
          </DropdownItem>
          <DropdownSeparator />
          <DropdownItem>
            <span>Log out</span>
            <DropdownShortcut>⇧⌘Q</DropdownShortcut>
          </DropdownItem>
        </DropdownContent>
      </Dropdown>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
  DropdownShortcut,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({ variant: 'outline' })" type="button">Open</button>
    </DropdownTrigger>
    <DropdownContent>
      <DropdownLabel>My Account</DropdownLabel>
      <DropdownItem>
        <span>Profile</span>
        <DropdownShortcut>⇧⌘P</DropdownShortcut>
      </DropdownItem>
      <DropdownItem>
        <span>Billing</span>
        <DropdownShortcut>⌘B</DropdownShortcut>
      </DropdownItem>
      <DropdownItem>
        <span>Settings</span>
        <DropdownShortcut>⌘S</DropdownShortcut>
      </DropdownItem>
      <DropdownSeparator />
      <DropdownItem>
        <span>Log out</span>
        <DropdownShortcut>⇧⌘Q</DropdownShortcut>
      </DropdownItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Placement Options

You can position the dropdown menu in different ways by customizing the `side` and `align` properties.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
---

<div class="flex gap-4">
  <Dropdown>
    <DropdownTrigger asChild>
      <Button>Left (Start)</Button>
    </DropdownTrigger>
    <DropdownContent align="start">
      <DropdownItem>Option 1</DropdownItem>
      <DropdownItem>Option 2</DropdownItem>
      <DropdownItem>Option 3</DropdownItem>
    </DropdownContent>
  </Dropdown>
  <Dropdown>
    <DropdownTrigger asChild>
      <Button>Center</Button>
    </DropdownTrigger>
    <DropdownContent align="center">
      <DropdownItem>Option 1</DropdownItem>
      <DropdownItem>Option 2</DropdownItem>
      <DropdownItem>Option 3</DropdownItem>
    </DropdownContent>
  </Dropdown>
  <Dropdown>
    <DropdownTrigger asChild>
      <Button>Right (End)</Button>
    </DropdownTrigger>
    <DropdownContent align="end">
      <DropdownItem>Option 1</DropdownItem>
      <DropdownItem>Option 2</DropdownItem>
      <DropdownItem>Option 3</DropdownItem>
    </DropdownContent>
  </Dropdown>
</div>
```
  </div>
  <div slot="react">
```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <div className="flex gap-4">
        <Dropdown>
          <DropdownTrigger asChild>
            <Button>Left (Start)</Button>
          </DropdownTrigger>
          <DropdownContent align="start">
            <DropdownItem>Option 1</DropdownItem>
            <DropdownItem>Option 2</DropdownItem>
            <DropdownItem>Option 3</DropdownItem>
          </DropdownContent>
        </Dropdown>
        <Dropdown>
          <DropdownTrigger asChild>
            <Button>Center</Button>
          </DropdownTrigger>
          <DropdownContent align="center">
            <DropdownItem>Option 1</DropdownItem>
            <DropdownItem>Option 2</DropdownItem>
            <DropdownItem>Option 3</DropdownItem>
          </DropdownContent>
        </Dropdown>
        <Dropdown>
          <DropdownTrigger asChild>
            <Button>Right (End)</Button>
          </DropdownTrigger>
          <DropdownContent align="end">
            <DropdownItem>Option 1</DropdownItem>
            <DropdownItem>Option 2</DropdownItem>
            <DropdownItem>Option 3</DropdownItem>
          </DropdownContent>
        </Dropdown>
      </div>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<template>
  <div class="flex gap-4">
    <Dropdown>
      <DropdownTrigger asChild>
        <button :class="ButtonVariants.button({})" type="button">Left (Start)</button>
      </DropdownTrigger>
      <DropdownContent align="start">
        <DropdownItem>Option 1</DropdownItem>
        <DropdownItem>Option 2</DropdownItem>
        <DropdownItem>Option 3</DropdownItem>
      </DropdownContent>
    </Dropdown>
    <Dropdown>
      <DropdownTrigger asChild>
        <button :class="ButtonVariants.button({})" type="button">Center</button>
      </DropdownTrigger>
      <DropdownContent align="center">
        <DropdownItem>Option 1</DropdownItem>
        <DropdownItem>Option 2</DropdownItem>
        <DropdownItem>Option 3</DropdownItem>
      </DropdownContent>
    </Dropdown>
    <Dropdown>
      <DropdownTrigger asChild>
        <button :class="ButtonVariants.button({})" type="button">Right (End)</button>
      </DropdownTrigger>
      <DropdownContent align="end">
        <DropdownItem>Option 1</DropdownItem>
        <DropdownItem>Option 2</DropdownItem>
        <DropdownItem>Option 3</DropdownItem>
      </DropdownContent>
    </Dropdown>
  </div>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## With Icons

You can add icons to dropdown items for better visual cues.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
import Copy from "@tabler/icons/outline/copy.svg";
import Edit from "@tabler/icons/outline/edit.svg";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button>Actions</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownLabel>Actions</DropdownLabel>
    <DropdownSeparator />
    <DropdownItem>
      <Copy />
      Copy
    </DropdownItem>
    <DropdownItem>
      <Edit />
      Edit
    </DropdownItem>
    <DropdownSeparator />
    <DropdownLabel>Danger Zone</DropdownLabel>
    <DropdownItem inset>Archive</DropdownItem>
    <DropdownItem inset disabled>Delete</DropdownItem>
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from "@/components/starwind/dropdown";
import { Button } from "@/components/starwind/button";
import { IconCopy as Copy } from "@tabler/icons-react";
import { IconEdit as Edit } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Dropdown>
        <DropdownTrigger asChild>
          <Button>Actions</Button>
        </DropdownTrigger>
        <DropdownContent>
          <DropdownLabel>Actions</DropdownLabel>
          <DropdownSeparator />
          <DropdownItem>
            <Copy />
            Copy
          </DropdownItem>
          <DropdownItem>
            <Edit />
            Edit
          </DropdownItem>
          <DropdownSeparator />
          <DropdownLabel>Danger Zone</DropdownLabel>
          <DropdownItem inset>Archive</DropdownItem>
          <DropdownItem inset disabled>Delete</DropdownItem>
        </DropdownContent>
      </Dropdown>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
} from "@/components/starwind/dropdown";
import { Button, ButtonVariants } from "@/components/starwind/button";
import { IconCopy as Copy } from "@tabler/icons-vue";
import { IconEdit as Edit } from "@tabler/icons-vue";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button :class="ButtonVariants.button({})" type="button">Actions</button>
    </DropdownTrigger>
    <DropdownContent>
      <DropdownLabel>Actions</DropdownLabel>
      <DropdownSeparator />
      <DropdownItem>
        <Copy />
        Copy
      </DropdownItem>
      <DropdownItem>
        <Edit />
        Edit
      </DropdownItem>
      <DropdownSeparator />
      <DropdownLabel>Danger Zone</DropdownLabel>
      <DropdownItem inset>Archive</DropdownItem>
      <DropdownItem inset disabled>Delete</DropdownItem>
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## API Reference
### Dropdown
- Inherits div attributes.

### DropdownTrigger
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Primitive override | Merges the component behavior and props into its child element. |
- Inherits button attributes.

### DropdownContent
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `disablePortal` | `boolean` | No | `false` | Wrapper prop | Keeps the public Portal wrapper inline instead of moving it to a target. |
| `portalContainer` | `string` | No | - | Wrapper prop | Sets the CSS selector for the public Portal wrapper target. |
- Inherits div attributes.

### DropdownItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `inset` | `boolean` | No | `false` | Wrapper prop | Adds leading inset spacing for visual alignment. |
- Inherits div attributes.

### DropdownLinkItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `closeOnClick` | `boolean` | No | `false` | Wrapper prop | Closes the containing surface after the item is activated. |
| `inset` | `boolean` | No | `false` | Wrapper prop | Adds leading inset spacing for visual alignment. |
- Inherits a attributes.

### DropdownCheckboxItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `closeOnClick` | `boolean` | No | `false` | Wrapper prop | Closes the containing surface after the item is activated. |
| `indicatorClass` | `string` | No | - | Wrapper prop | Adds classes to the generated selection indicator. |
| `inset` | `boolean` | No | `false` | Wrapper prop | Adds leading inset spacing for visual alignment. |
| `showIndicator` | `boolean` | No | `true` | Wrapper prop | Shows the generated selection indicator. |
- Inherits div attributes. Omits `aria-checked` and `role`.

### DropdownCheckboxItemIndicator
- Inherits span attributes.

### DropdownRadioGroup
- Inherits div attributes.

### DropdownRadioItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `closeOnClick` | `boolean` | No | `false` | Wrapper prop | Closes the containing surface after the item is activated. |
| `indicatorClass` | `string` | No | - | Wrapper prop | Adds classes to the generated selection indicator. |
| `inset` | `boolean` | No | `false` | Wrapper prop | Adds leading inset spacing for visual alignment. |
| `showIndicator` | `boolean` | No | `true` | Wrapper prop | Shows the generated selection indicator. |
| `value` | `string` | Yes | - | Wrapper prop | Controls or identifies the component value. |
- Inherits div attributes. Omits `aria-checked` and `role`.

### DropdownRadioItemIndicator
- Inherits span attributes.

### DropdownGroup
- Inherits div attributes.

### DropdownLabel
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `inset` | `boolean` | No | `false` | Wrapper prop | Adds leading inset spacing for visual alignment. |
- Inherits div attributes.

### DropdownSeparator
- Inherits div attributes.

### DropdownShortcut
- Inherits span attributes.

### DropdownSub
- Inherits div attributes.

### DropdownSubTrigger
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `inset` | `boolean` | No | `false` | Wrapper prop | Adds leading inset spacing for visual alignment. |
- Inherits div attributes.

### DropdownSubContent
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `disablePortal` | `boolean` | No | `false` | Wrapper prop | Keeps the public Portal wrapper inline instead of moving it to a target. |
| `portalContainer` | `string` | No | - | Wrapper prop | Sets the CSS selector for the public Portal wrapper target. |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | No | `"right"` | Primitive override | Selects the preferred side for floating content. |
| `sideOffset` | `number` | No | `0` | Primitive override | Sets the distance in pixels between floating content and its anchor. |
- Inherits div attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Menu Primitive](/docs/primitives/menu/)
- Runtime factory: [`createMenu`](/docs/runtime/#create-menu) from `@starwind-ui/runtime/menu`

## Changelog

### v3.2.1

- Connected group headings to their groups with `aria-labelledby` so assistive technology can identify each group.

### v3.2.0

- Added `portalContainer` and `disablePortal` to `DropdownContent` and `DropdownSubContent` for
custom portal targets and inline rendering.

### v3.1.1

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### v3.1.0

- Added `DropdownLinkItem` for native anchor navigation; replace legacy `DropdownItem as="a"` usage with this dedicated part.

### v3.0.0

- Rebuilt Dropdown on Starwind Runtime while preserving its styled API over the shared Menu behavior.
- See the [Menu Primitive](/docs/primitives/menu/) for the underlying unstyled anatomy and behavior API.