Dropdown

View Markdown

---
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>

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>
  );
}

<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>

<script lang="ts">
  import Dropdown from "@/components/starwind/dropdown";
  import { Button } from "@/components/starwind/button";
</script>

<Dropdown.Root>
  <Dropdown.Trigger>
    {#snippet child({ props, children })}<Button {...props}>{@render children?.()}</Button
      >{/snippet}
    Open Menu
  </Dropdown.Trigger>
  <Dropdown.Content>
    <Dropdown.Label>My Account</Dropdown.Label>
    <Dropdown.Separator />
    <Dropdown.Item>Profile</Dropdown.Item>
    <Dropdown.Item>Settings</Dropdown.Item>
    <Dropdown.Separator />
    <Dropdown.Item>Help</Dropdown.Item>
    <Dropdown.Item disabled>Sign out</Dropdown.Item>
  </Dropdown.Content>
</Dropdown.Root>

Installation

pnpx starwind@latest add dropdown --framework astro

npx starwind@latest add dropdown --framework astro

yarn dlx starwind@latest add dropdown --framework astro

pnpx starwind@latest add dropdown --framework react

npx starwind@latest add dropdown --framework react

yarn dlx starwind@latest add dropdown --framework react

pnpx starwind@latest add dropdown --framework vue

npx starwind@latest add dropdown --framework vue

yarn dlx starwind@latest add dropdown --framework vue

pnpx starwind@latest add dropdown --framework svelte

npx starwind@latest add dropdown --framework svelte

yarn dlx starwind@latest add dropdown --framework svelte

Usage

---
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>

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>
  );
}

<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>

<script lang="ts">
  import {
    Dropdown,
    DropdownTrigger,
    DropdownContent,
    DropdownItem,
    DropdownLabel,
    DropdownSeparator,
  } from "@/components/starwind/dropdown";
  import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<Dropdown>
  <DropdownTrigger>
    {#snippet child({ props })}
      <button {...props} class={ButtonVariants.button({})} type="button">
        Open Menu
      </button>
    {/snippet}
  </DropdownTrigger>
  <DropdownContent>
    <DropdownLabel>My Account</DropdownLabel>
    <DropdownSeparator />
    <DropdownItem>Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Help</DropdownItem>
    <DropdownItem disabled>Sign out</DropdownItem>
  </DropdownContent>
</Dropdown>

Composition

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

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

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

---
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>

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>
    </>
  );
}

<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>

<script lang="ts">
  import {
    Dropdown,
    DropdownTrigger,
    DropdownContent,
    DropdownItem,
  } from "@/components/starwind/dropdown";
  import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<Dropdown>
  <DropdownTrigger>
    {#snippet child({ props })}
      <button {...props} class={ButtonVariants.button({})} type="button">
        Navigation
      </button>
    {/snippet}
  </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>

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.

---
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>

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>
  );
}

<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>

<script lang="ts">
  import {
    Dropdown,
    DropdownTrigger,
    DropdownContent,
    DropdownLinkItem,
  } from "@/components/starwind/dropdown";
  import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<Dropdown>
  <DropdownTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        class={ButtonVariants.button({ variant: "outline" })}
        type="button"
      >
        Resources
      </button>
    {/snippet}
  </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>

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.

---
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>

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>
    </>
  );
}

<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>

<script lang="ts">
  import {
    Dropdown,
    DropdownTrigger,
    DropdownContent,
    DropdownItem,
    DropdownLabel,
    DropdownSeparator,
  } from "@/components/starwind/dropdown";
  import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<Dropdown openOnHover closeDelay={300}>
  <DropdownTrigger>
    {#snippet child({ props })}
      <button {...props} class={ButtonVariants.button({})} type="button">Hover Me</button>
    {/snippet}
  </DropdownTrigger>
  <DropdownContent>
    <DropdownLabel>My Account</DropdownLabel>
    <DropdownSeparator />
    <DropdownItem>Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Help</DropdownItem>
    <DropdownItem disabled>Sign out</DropdownItem>
  </DropdownContent>
</Dropdown>

Submenu

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

---
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>

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>
    </>
  );
}

<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>

<script lang="ts">
  import {
    Dropdown,
    DropdownContent,
    DropdownItem,
    DropdownSeparator,
    DropdownShortcut,
    DropdownSub,
    DropdownSubContent,
    DropdownSubTrigger,
    DropdownTrigger,
  } from "@/components/starwind/dropdown";
  import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<Dropdown>
  <DropdownTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        class={ButtonVariants.button({ variant: "outline" })}
        type="button"
      >
        Open
      </button>
    {/snippet}
  </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>

Shortcuts

Add DropdownShortcut to display keyboard hints alongside actions.

---
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>

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>
    </>
  );
}

<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>

<script lang="ts">
  import {
    Dropdown,
    DropdownContent,
    DropdownItem,
    DropdownLabel,
    DropdownSeparator,
    DropdownShortcut,
    DropdownTrigger,
  } from "@/components/starwind/dropdown";
  import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

<Dropdown>
  <DropdownTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        class={ButtonVariants.button({ variant: "outline" })}
        type="button"
      >
        Open
      </button>
    {/snippet}
  </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>

Placement Options

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

---
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>

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>
    </>
  );
}

<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>

<script lang="ts">
  import {
    Dropdown,
    DropdownTrigger,
    DropdownContent,
    DropdownItem,
  } from "@/components/starwind/dropdown";
  import { Button, ButtonVariants } from "@/components/starwind/button";
</script>

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

With Icons

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

---
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>

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>
    </>
  );
}

<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>

<script 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-svelte";
  import { IconEdit as Edit } from "@tabler/icons-svelte";
</script>

<Dropdown>
  <DropdownTrigger>
    {#snippet child({ props })}
      <button {...props} class={ButtonVariants.button({})} type="button">Actions</button>
    {/snippet}
  </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>

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Inherits button attributes.

Contains the following additional props:

Prop Type Default

asChild boolean false

Description: Merges the component behavior and props into its child element.
Classification: Primitive override
Primitive prop: menu.Trigger.asChild

Inherits div attributes.

Contains the following additional props:

Prop Type Default

disablePortal boolean false

Description: Keeps the public Portal wrapper inline instead of moving it to a target.
Classification: Wrapper prop

portalContainer string —

Description: Sets the CSS selector for the public Portal wrapper target.
Classification: Wrapper prop

Inherits div attributes.

Contains the following additional props:

Prop Type Default

inset boolean false

Description: Adds leading inset spacing for visual alignment.
Classification: Wrapper prop

Inherits a attributes.

Contains the following additional props:

Prop Type Default

closeOnClick boolean false

Description: Closes the containing surface after the item is activated.
Classification: Wrapper prop

inset boolean false

Description: Adds leading inset spacing for visual alignment.
Classification: Wrapper prop

Inherits div attributes. Omits `aria-checked` and `role`.

Contains the following additional props:

Prop Type Default

closeOnClick boolean false

Description: Closes the containing surface after the item is activated.
Classification: Wrapper prop

indicatorClass string —

Description: Adds classes to the generated selection indicator.
Classification: Wrapper prop

inset boolean false

Description: Adds leading inset spacing for visual alignment.
Classification: Wrapper prop

showIndicator boolean true

Description: Shows the generated selection indicator.
Classification: Wrapper prop

Inherits div attributes. Omits `aria-checked` and `role`.

Contains the following additional props:

Prop Type Default

closeOnClick boolean false

Description: Closes the containing surface after the item is activated.
Classification: Wrapper prop

indicatorClass string —

Description: Adds classes to the generated selection indicator.
Classification: Wrapper prop

inset boolean false

Description: Adds leading inset spacing for visual alignment.
Classification: Wrapper prop

showIndicator boolean true

Description: Shows the generated selection indicator.
Classification: Wrapper prop

value Required string —

Description: Controls or identifies the component value.
Classification: Wrapper prop

Inherits div attributes.

Contains the following additional props:

Prop Type Default

inset boolean false

Description: Adds leading inset spacing for visual alignment.
Classification: Wrapper prop

Inherits div attributes.

Contains the following additional props:

Prop Type Default

inset boolean false

Description: Adds leading inset spacing for visual alignment.
Classification: Wrapper prop

Inherits div attributes.

Contains the following additional props:

Prop Type Default

disablePortal boolean false

Description: Keeps the public Portal wrapper inline instead of moving it to a target.
Classification: Wrapper prop

portalContainer string —

Description: Sets the CSS selector for the public Portal wrapper target.
Classification: Wrapper prop

side "top" | "right" | "bottom" | "left" "right"

Description: Selects the preferred side for floating content.
Classification: Primitive override
Primitive prop: menu.Popup.side

sideOffset number 0

Description: Sets the distance in pixels between floating content and its anchor.
Classification: Primitive override
Primitive prop: menu.Popup.sideOffset

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Dropdown.

Primitive API

Menu Primitive

Runtime API

Menu primitive: createMenu from @starwind-ui/runtime/menu

Changelog

View version history v3.3.0 6 releases

v3.3.0

Vue checkbox and radio menu items keep their previous selection when a change is canceled.
Added an optional icon slot to submenu triggers across frameworks.
Reduced background work when a React page uses multiple menus, tooltips, or other portals.
Fixed nested Svelte overlays inside a dialog appearing behind their parent or failing to receive clicks.
Fixed nested overlays appearing behind their parent in Vue and Svelte. Overlays can now render under the document body; if custom CSS or DOM queries require them to stay inside a parent, set a portal container or add data-floating-root to that parent.
Fixed React 18 retaining removed popup elements when the parent component stays mounted.

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 for the underlying unstyled anatomy and behavior API.

Layer Metadata

Dropdown is the styled component API for the Menu primitive. Dropdown is available for Astro, React, Vue, and Svelte.

styled-component Dropdown Dropdown is the styled component API for the Menu primitive. Dropdown is available for Astro, React, Vue, and Svelte. Styled component Behavior Foundation dropdown renamed-primitive Renamed primitive The styled docs use the Dropdown name while the behavior primitive is menu. /docs/components/dropdown/ DropdownCheckboxItem DropdownCheckboxItemIndicator DropdownContent DropdownGroup DropdownItem DropdownLabel DropdownLinkItem DropdownRadioGroup DropdownRadioItem DropdownRadioItemIndicator DropdownSeparator DropdownShortcut DropdownSub DropdownSubContent DropdownSubTrigger DropdownTrigger Root Trigger Content CheckboxItem CheckboxItemIndicator RadioGroup RadioItem RadioItemIndicator Item LinkItem Group Label Separator Shortcut Sub SubTrigger SubContent DropdownVariants menu Menu Navigation menus routing astro react dropdownCheckboxItem dropdownCheckboxItemIndicator dropdownContent dropdownItem dropdownLabel dropdownRadioGroup dropdownRadioItem dropdownRadioItemIndicator dropdownSeparator dropdownShortcut dropdownTrigger dropdown-checkbox-item dropdown-checkbox-item-indicator dropdown-content dropdown-group dropdown-item dropdown-label dropdown-link-item dropdown-portal dropdown-radio-group dropdown-radio-item dropdown-radio-item-indicator dropdown-separator dropdown-shortcut dropdown-sub dropdown-sub-content dropdown-sub-portal dropdown-sub-trigger dropdown-trigger /docs/primitives/menu/ Primitive Menu createMenu @starwind-ui/runtime/menu /docs/runtime/#create-menu Runtime factory createMenu Astro available Available Astro available React React available Vue Vue available Svelte Svelte available div attributes asChild boolean Primitive override false Merges the component behavior and props into its child element. button attributes disablePortal Wrapper prop Keeps the public Portal wrapper inline instead of moving it to a target. portalContainer string Sets the CSS selector for the public Portal wrapper target. inset Adds leading inset spacing for visual alignment. closeOnClick Closes the containing surface after the item is activated. a attributes indicatorClass Adds classes to the generated selection indicator. showIndicator true Shows the generated selection indicator. span attributes value Controls or identifies the component value. side "top" | "right" | "bottom" | "left" "right" Selects the preferred side for floating content. sideOffset number 0 Sets the distance in pixels between floating content and its anchor.

Dropdown

Installation

Usage

Composition

Action Menu

Link Items

Hover Open

Submenu

Shortcuts

Placement Options

With Icons

API Reference

Dropdown Trigger

Dropdown Content

Dropdown Item

Dropdown Link Item

Dropdown Checkbox Item

Dropdown Radio Item

Dropdown Label

Dropdown Sub Trigger

Dropdown Sub Content

Changelog

v3.3.0

v3.2.1

v3.2.0

v3.1.1

v3.1.0

v3.0.0