On this page

Dropdown

---
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 as="a" href="#">Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Help</DropdownItem>
    <DropdownItem disabled>Sign out</DropdownItem>
  </DropdownContent>
</Dropdown>

Installation

pnpx starwind@latest add dropdown

npx starwind@latest add dropdown

yarn dlx starwind@latest add dropdown

Usage

A common use case is a standard navigation menu dropdown, where all items are likely links. Here is an example making use of the as prop on DropdownItem.

---
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 as="a" href="/">Home</DropdownItem>
    <DropdownItem as="a" href="/products">Products</DropdownItem>
    <DropdownItem as="a" href="/services">Services</DropdownItem>
    <DropdownItem as="a" href="/about">About Us</DropdownItem>
    <DropdownItem as="a" href="/contact">Contact</DropdownItem>
  </DropdownContent>
</Dropdown>

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 as="a" href="#">Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Help</DropdownItem>
    <DropdownItem disabled>Sign out</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>

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>

API Reference

The root component that serves as a container for all dropdown-related components. It manages the state of the dropdown and handles keyboard interactions.

Prop	Type	Default
`openOnHover`	`boolean`	`false`
`closeDelay`	`number`	`200`
`class`	`string`	-

<Dropdown openOnHover closeDelay={300}>
  <!-- Dropdown components -->
</Dropdown>

Additional Notes:

openOnHover: When enabled, the dropdown will open on hover in addition to click
closeDelay: Time in milliseconds to wait before closing when hover open is enabled

DropdownTrigger

The button that opens the dropdown menu when clicked.

Prop	Type	Default
`asChild`	`boolean`	`false`
`class`	`string`	-

<DropdownTrigger asChild>
  <Button>Open</Button>
</DropdownTrigger>

Additional Notes:

asChild: When enabled, renders the child element instead of a button

DropdownContent

The container for dropdown menu content. This component renders the dropdown menu with animation effects.

Prop	Type	Default
`side`	`"top" \| "bottom"`	`"bottom"`
`align`	`"start" \| "center" \| "end"`	`"start"`
`sideOffset`	`number`	`4`
`animationDuration`	`number`	`150`
`class`	`string`	-

<DropdownContent align="center" sideOffset={8}>
  <!-- Dropdown items -->
</DropdownContent>

Additional Notes:

side: Side of the dropdown relative to the trigger
align: Alignment of the dropdown relative to the trigger
sideOffset: Offset distance in pixels from the trigger
animationDuration: Open and close animation duration in milliseconds

DropdownItem

A component for creating interactive items within the dropdown menu.

Prop	Type	Default
`as`	`HTMLTag`	`"div"`
`inset`	`boolean`	`false`
`disabled`	`boolean`	`false`
`class`	`string`	-

<DropdownItem as="a" href="#">Menu Item</DropdownItem>

Additional Notes:

as: HTML element to render the item as (e.g., “a”, “button”)
inset: Whether the item has left padding for alignment with items that have icons

DropdownLabel

A component for rendering a non-interactive label within the dropdown menu.

Prop	Type	Default
`inset`	`boolean`	`false`
`class`	`string`	-

<DropdownLabel>Section Title</DropdownLabel>

Additional Notes:

inset: Whether the label has left padding for alignment with items that have icons

DropdownSeparator

A component for creating a visual separator between dropdown menu items.

Prop	Type	Default
`class`	`string`	-

<DropdownSeparator />

Changelog

v1.2.2

use class:list to remove potential “undefined” on DropdownTrigger

v1.2.1

Removed debug logging statements

v1.2.0

style and focus state updates

v1.1.0

Add a data-slot attribute to all components to enable global styling updates

v1.0.3

Only return focus to the dropdown trigger on dropdown close if the keyboard was involved (not for clicks or pointer events)
Fix exit animation

v1.0.2

Fix race condition when using hover dropdown caused by entering the DropdownTrigger while it’s closing
Add ability to pass additional classes to DropdownTrigger when using asChild
Remove unnecessary role="button" on DropdownTrigger

v1.0.1

Fix dropdown hover bug on mobile - change from mouse events to pointer events and ensure hover events do not fire for touch devices
Allow scrolling on touch devices without closing the dropdown menu by using pointerdown event only for mouse and using click event otherwise
Remove unused “name” prop from Dropdown.astro

v1.0.0

Initial component release with starwind v1.5.0

Dropdown

Installation

Usage

Navigation Menu

Hover Open

Placement Options

With Icons

API Reference

Dropdown

DropdownTrigger

DropdownContent

DropdownItem

DropdownLabel

DropdownSeparator

Changelog

v1.2.2

v1.2.1

v1.2.0

v1.1.0

v1.0.3

v1.0.2

v1.0.1

v1.0.0