AstroAnimate Docs — Installation, Components & API

An interactive dropdown menu supporting click or hover triggers with a zero-JS baseline and configurable animations.

Preview/Playground

Created by

Prashanth

Astro

---
import Dropdown from "@astroanimate/core/Dropdown";
---

<Dropdown
  label="Options"
  items={["Profile", "Settings", "Logout"]}
  enhance={true}
/>

<Dropdown
  label="Hover Trigger"
  items={["Profile", "Settings", "Logout"]}
  enhance={true}
  trigger="hover"
/>

Installation

bash

npm install @astroanimate/core

Usage

---
import Dropdown from "@astroanimate/core/Dropdown";
---

<Dropdown />

Renders the Dropdown component with AstroAnimate defaults.

Props

Prop	Type	Default	Description
`label`	`string`	`""`	Button text label
`items`	`(string \\| DropdownItem)[]`	`[]`	Menu items array
`enhance`	`boolean`	`false`	Enable animationsr
`trigger`	`"click' \\| 'hover"`	`"click"`	Open trigger type
`hoverDelay`	`number`	`120`	Hover close delay in ms
`onSelect`	`(index: number) => void`	`""`	Callback when item selected - pass index

Use When

Presenting a list of supplementary actions or navigation links
Requiring functional menus that degrade gracefully without JavaScript
Needing customizable trigger behaviors (click vs hover)

Avoid When

Constructing deep, multi-level nested navigation menus
Requiring rich custom content inside the trigger button itself

Accessibility

Respects prefers-reduced-motion: reduce by disabling CSS transitions and JS enhancement
Implements ARIA roles and states (aria-haspopup, aria-expanded, role="menu", role="menuitem")

Performance

Operates on a Zero-JS baseline (renders HTML and handles hover via pure CSS)
Uses hardware-accelerated CSS properties (transform, opacity) for smooth animations

Credits

Credit to @Barsan

Dropdown NEW