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.

<Dropdown>
  {/* DropdownTrigger and DropdownContent */}
</Dropdown>

Prop	Type	Default	Description
`openOnHover`	`boolean`	`false`	When true, the dropdown will open on hover in addition to click
`closeDelay`	`number`	`200`	Time in milliseconds to wait before closing when hover open is enabled

The component accepts all standard HTML attributes for <div> elements.

DropdownTrigger

The button that opens the dropdown menu when clicked.

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

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	When true, the component will render its child element instead of a button component

The component accepts all standard HTML attributes for <button> elements.

DropdownContent

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

<DropdownContent>
  {/* DropdownItem, DropdownLabel, DropdownSeparator components */}
</DropdownContent>

Prop	Type	Default	Description
`side`	`"top" \| "bottom"`	`"bottom"`	Side of the dropdown
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment of the dropdown
`sideOffset`	`number`	`4`	Offset distance in pixels
`animationDuration`	`number`	`150`	Open and close animation duration in milliseconds

The component accepts all standard HTML attributes for <div> elements.

DropdownItem

A component for creating interactive items within the dropdown menu.

<DropdownItem>Menu Item</DropdownItem>

Prop	Type	Default	Description
`as`	`HTMLTag`	`"div"`	HTML element to render the item as (e.g., “a”, “button”, etc.)
`inset`	`boolean`	`false`	Whether the item is inset (has left padding)
`disabled`	`boolean`	`false`	Whether the item is disabled

The component accepts all standard HTML attributes for the specified element.

DropdownLabel

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

<DropdownLabel>Section Title</DropdownLabel>

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Whether the label is inset (has left padding)

The component accepts all standard HTML attributes for <div> elements.

DropdownSeparator

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

<DropdownSeparator />

The component accepts all standard HTML attributes for <div> elements.

Changelog

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

v1.2.0

v1.1.0

v1.0.3

v1.0.2

v1.0.1

v1.0.0