2023-04-04
2312
#react
Doğacan Bilgili
240
Apr 4, 2023 ⋅ 8 min read

Customize a reusable React dropdown menu component

Doğacan Bilgili A software developer who is also into 3D-modeling and animation.

Recent posts:

Secure your AI-generated projects with these security practices

Secure AI-generated code with proactive prompting, automated guardrails, and contextual auditing. A practical playbook for safe AI-assisted development.

Ikeh Akinyemi
Sep 16, 2025 ⋅ 5 min read

Let’s kill vibe coding and bring back prompt engineering

Explore the vibe coding hype cycle, the risks of casual “vibe-driven” development, and why prompt engineering deserves a comeback as a critical skill for building better, more reliable AI applications.

Oscar Jite-Orimiono
Sep 16, 2025 ⋅ 11 min read
Frontend Devs Aren't Lazy, They're Burnt Out

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

Shalitha Suranga
Sep 15, 2025 ⋅ 4 min read

Can native web APIs replace custom components in 2025?

Learn how native web APIs such as dialog, details, and Popover bring accessibility, performance, and simplicity without custom components.

Daniel Schwarz
Sep 12, 2025 ⋅ 9 min read
View all posts

11 Replies to "Customize a reusable React dropdown menu component"

  1. The code snippets are not accurate. I tried following along but your syntax errors were too confusing to try to fix. Look at the portion where you introduce FontAwesome for random angle brackets and closing divs with no opens.

    1. Hi, Alex. Should be all set now. This isn’t Doğacan’s mistake. The formatting got borked when we migrated the blog to wordpress. Thanks for pointing it out (and sorry for the hassle).

  2. This tutorial is not bad (you can actually use functions with hooks and avoid using classes), but without the styles for the components I can’t really see the example that you produce here. So I would add a codepen or something with the whole component.

  3. Hey Dani,
    That’s true that now you can do that with hooks, but that was not an option back then when this tutorial was written.
    As for the styling, you can actually find the complete source code in the GitHub repo which I linked at the very beginning of this article.

  4. Im not sure how useful this tutorial is as I did not try it 🙂 But just by looking the code, I saw that it is not working as it should. A custom select should be accessible through a keyboard, like html select is, for accessibility reasons and for you to be able to select an option from your keyboard.
    So this tutorial has these things wrong:
    – No `role=”option”` and `role=”listbox”` attributes were set
    – There are no handlers for simulating a default’s “select” behavior, like navigating with the arrows.
    – It’s inaccessible

  5. I was about to start reading the tutorial, when I come across your review I changed my mind. thank you Mr. You are a time saver 😉

  6. I got an error “toggleItem is not defined” when I passed the toggle item to the list item.
    Please I need and urgent help.

  7. Hey man just wanna say thank you and keep up the good work!
    Found myself creating a custom select and was missing the setTimeout bit for “handling outside clicks”, funny you stuck that at the end of the post lol

Leave a Reply