HTML + CSSFilters
Cascading dropdown menu
The menu scales open from the top and its options drop in one after another.
Settings
16px
1x
Code
<div class="uv-fdd"><button class="tg">Category <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button style="--i:0">All</button><button style="--i:1">Design</button><button style="--i:2">Code</button><button style="--i:3">Photos</button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
A dropdown for when a single choice is all you need. The category picker on an online course catalogue, for instance: All, Design, Development, Photography. The staggered entrance makes a plain list feel considered, and the arrow flips so it is clear the menu is open. Handy if you need an animated dropdown menu in HTML and CSS.
Keep the list short, six or seven options at most, or the cascade drags on. For longer lists, look at the dropdown with a search field instead. If your audience is in a hurry, speed the animation up.