How do i make a dropdown menu?
This is what I/ChatGpt currently have come up with, but the handleClickOutside function doesnt work. I didnt find any docs/examples online.
https://github.com/raphaelladinig/musikbezirk-silz/blob/master/src/components/dropdown.tsx
GitHub
musikbezirk-silz/src/components/dropdown.tsx at master · raphaellad...
Contribute to raphaelladinig/musikbezirk-silz development by creating an account on GitHub.
3 Replies
looks good to me. You probably want to set id="dropdown" on the dropdown and not the outer div
thx that was the issue
nice!
Also, while this simple dropdown works in some cases, you'll probably run into issues where the absolutely positioned dropdown will get cut off because some outer div has overflow hidden set on it. You'll want to portal it out so it's under the body and has no issues.
https://docs.solidjs.com/concepts/control-flow/portal
And to position it properly use something like floating ui https://floating-ui.com/
And if you don't want to implement it yourself, there are already great implementations that do all this for you:
https://kobalte.dev/docs/core/overview/introduction
Floating UI - Create tooltips, popovers, dropdowns, and more
A JavaScript library to position floating elements and create interactions for them.