Bringing back the drop-down issue in 2025 .
Hi everyone
I’m here to talk about dropdowns.
First what is a drop-down :
Is <details> a drop-down ?
Is <select> a drop-down ?
Is <popover> opening the popover at the bottom of the opening button a drop-down ?
I would say yes. There is also the known drop-down issue on hover that by convention state that you shouldn’t make multiple levels in a hover drop-down because of the mobile version.
We can also think about this button where you can click on the left side to get the link or click on the arrow in the right side that would show you the sub level of the drop-down (bootstrap style)
Let’s now give some context .
Your à Wordpress developer , your in this discord so you love CSS and even tho progressive enhancement is the future if you sell your product as a
Multi platform, accessible , responsive solution then your component should be efficient for all latest version of the most common browser desktop and mobile.
Lastly JS is great but if you want you site to be ok with webvitals and enjoyable to visite , then JS should be used the less possible on each components to have overall a fast website.
Now
You have a nav on the header . There is a level one term(category) , let’s call it “elements”Inside this category there is 4 sub categories :
“Water”, “fire”, “earth”, “wind”.
The user needs to be able to go to the page “elements” and also to one of the sub categories . And I don’t Want to see this “see all elements” inside the drop-down.
In our case the hover drop-down on a “elements” link could work , but it doesn’t seems intuitive that this link is clickable. and what should we do about mobile agent that can’t hover.
UX is the main purpose here, no concession can be made on that point .
It would be a little caviar on the top if the components could be animated.
I’m sure everyone went through this , I’m just wondering what was the best solutions you found on that subject .
Happy coding
2 Replies
dropdown menus are such a pain 😆
First what is a drop-down : Is <details> a drop-down ? Is <select> a drop-down ? Is <popover> opening the popover at the bottom of the opening button a drop-down ?I would say popover over the others, though I could see an arugment for details. The problem with using a
select is, even with styleable ones coming, they don't contain links, and the purpose here is to navigate.
Anytime there is a "main" page as well as sub-pages, it becomes a bit annoying on mobile, for the reasons you listed.
I think dribbble.com does a nice job of handling it. On desktop, their explore link is a link and a dropdown. Being a link, you get the "hand" icon on hover, and there is a hover state, which I think works well enough.
Clicking it is the same as clicking popular, and that is exposed on the mobile version as well.
The example you gave is a little harder because you don't want "elements" as the dropdown, and then repeated... but since you mentioned that "UX is the main purpose here", I'd say that I'd then take the Dribble route, and probably do: Elements as a dropdown, and under that have All, and then list each individual one, even if the dropdown is clickable.
Comes down to a "you can't have your cake and eat it too" type thing, if you want to prioritize UX, then have a very straight forward way to get to the main page with everything.You are right, can't have it all.
Thank you for your answer. Dribbble's dropdown is similar to my current solution dropdown hover on descktop and details on mobile .
Thank you for your answer. Dribbble's dropdown is similar to my current solution dropdown hover on descktop and details on mobile .