Sort menu with direction arrow
Choose what to sort by, then tap the arrow to flip between ascending and descending.
Settings
Code
<div class="uv-fso"><button class="tg"><i class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg></i><b>Newest</b></button><div class="mn"><button style="--i:0">Newest</button><button style="--i:1">Price</button><button style="--i:2">Rating</button><button style="--i:3">Name</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
Every catalogue needs one. Picture an online wine shop where buyers sort by price, rating or newest arrivals, then flip the arrow to see the cheapest or the priciest bottles first. Splitting “what” from “which direction” keeps the list of options short. If you're searching for a sort by dropdown for an e-commerce page, this covers it.
Label the current choice clearly, like “Price” with the arrow beside it, so people remember how the list is ordered. Put it right above the product grid, next to the result count, where eyes already are.