`ease-dropdown` — Animated CSS-only dropdown menu component

[AjayBandiwaddar]

Feature Name

ease-dropdown — Animated CSS-only dropdown menu component

---

Description

A floating dropdown menu that opens on :focus-within or a checkbox toggle — no JavaScript required. The menu panel entrance uses opacity 0 → 1 combined with transform: scaleY(0.95) → scaleY(1) with transform-origin: top, giving it a natural top-down unfold feel. Closes automatically when focus leaves the trigger. All timing references existing --ease-speed-* and --ease-ease-* tokens.

---

Why is this useful for EaseMotion CSS?

EaseMotion CSS has buttons, cards, accordions, badges, and a stepper — but no navigation-level dropdown component. The VISION.md roadmap explicitly lists "Navigation components (navbar, sidebar)" as Planned v1.3, meaning this directly accelerates a planned milestone.

The key distinction from ease-accordion (the closest existing component) is fundamental:

• ease-accordion expands inline, pushing content downward, used for FAQs and content sections
• ease-dropdown floats above the document flow via position: absolute, used for navigation menus, action menus, and select-style pickers

They solve different layout problems. This submission fills the navigation gap in the component library using only :focus-within and CSS transitions — composable with existing ease-btn trigger and ease-card surface tokens.

---

HTML Snippet

<!-- Trigger + panel wrapper -->
<div class="dropdown">
  <button class="dropdown-trigger">
    Options
    <span class="dropdown-arrow">▾</span>
  </button>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Edit</a></li>
    <li><a class="dropdown-item" href="#">Duplicate</a></li>
    <li class="dropdown-divider"></li>
    <li><a class="dropdown-item dropdown-item-danger" href="#">Delete</a></li>
  </ul>
</div>

---

CSS Snippet

.dropdown {
  position: relative;
  display: inline-block;
}

/* Menu panel — hidden by default */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  list-style: none;
  padding: 4px 0;
  transform-origin: top center;

  /* Hidden state */
  opacity: 0;
  transform: scaleY(0.95) translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Open on focus-within — pure CSS, no JS */
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  transform: scaleY(1) translateY(0);
  pointer-events: auto;
}

/* Arrow rotation on open */
.dropdown:focus-within .dropdown-arrow {
  display: inline-block;
  transform: rotate(180deg);
  transition: transform 150ms ease;
}

.dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: #334155;
  text-decoration: none;
  transition: background 100ms ease;
}

.dropdown-item:hover {
  background: #f1f5f9;
}

.dropdown-item-danger {
  color: #ef4444;
}

.dropdown-divider {
  border-top: 1px solid #e2e8f0;
  margin: 4px 0;
}

---

Visual Reference

Trigger button with a rotating chevron arrow. On focus: menu panel scales in from top with a subtle fade — matching the same motion language as ease-card-hover and ease-slide-down already in the framework. On blur: panel fades out automatically. Demo will show three variants — navigation menu, action menu, and a right-aligned menu.

---

Checklist

• This feature does not duplicate an existing EaseMotion CSS class
• I understand my naming will be standardized by the maintainer
• I will submit code inside submissions/examples/ only — not in core/ or components/

[github-actions]

Hey @AjayBandiwaddar! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside submissions/examples/your-feature-name/
• Include demo.html · style.css · README.md in your folder
• Max 2 active issues per contributor — unassign others before taking new ones

🕑 Inactivity rule: Issues with no progress for 5 days will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡