# Dropdown Floating Button

> A floating action button that morphs into a dropdown quick-actions menu via GPU-composited `clip-path` animation — fully design-system agnostic.

- Category: Animation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: button, clip-path, dropdown
- Page: https://builder.atheros.ai/components/dropdown-floating-button
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_dropdown_floating_button/preview-bb998a041aa2.webp

## Features

- Clip-path morph animation from a design-system-shaped FAB to its menu panel (GPU-composited, no layout thrash)
- Staggered item reveal with per-child transition delays (110ms–250ms in 35ms steps); items fade out without delay on close
- Plus icon rotates 135° and cross-fades out during open
- Content-driven panel height — no fixed dimensions
- Drop-shadow on anchor follows the child's painted clip-path shape
- Click-outside and Escape key close the menu
- Responsive design with prefers-reduced-motion support

## Accessibility

- **Trigger state** — `aria-expanded` toggled on open/close
- **Trigger label** — `aria-label="Open quick actions"`
- **Close button** — `aria-label="Close menu"`
- **Dismiss** — Escape key and click-outside close the menu
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Enter / Space` — Activate focused button or toggle
- `Escape` — Close the menu
- `Tab` — Move focus between interactive elements

## Common questions

**Which frameworks is Dropdown Floating Button available in?**

Dropdown Floating Button ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Dropdown Floating Button animation component free?**

Dropdown Floating Button is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Dropdown Floating Button support dark mode?**

Yes. Dropdown Floating Button ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Dropdown Floating Button live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/dropdown-floating-button

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt