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:

​​How HTML’s Selectedcontent Element Improves Dropdowns

​​How HTML’s <selectedcontent> element improves dropdowns

is an experimental HTML element that gives developers control over how a selected option is displayed, using just HTML and CSS.

Temitope Oyedele
Jun 27, 2025 ⋅ 6 min read
advanced caching in Node.js with Valkey

How to get faster data access in Node.js with Valkey

Learn how to implement an advanced caching layer in a Node.js app using Valkey, a high-performance, Redis-compatible in-memory datastore.

Muhammed Ali
Jun 27, 2025 ⋅ 7 min read
how to properly handle rejected promises in TypeScript

How to properly handle rejected promises in TypeScript

Learn how to properly handle rejected promises in TypeScript using Angular, with tips for retry logic, typed results, and avoiding unhandled exceptions.

Lewis Cianci
Jun 26, 2025 ⋅ 4 min read
Your AI Has Agency — Here’s How To Architect Its Frontend

Your AI has agency — here’s how to architect its frontend

AI’s not just following orders anymore. If you’re building the frontend, here’s how to design interfaces that actually understand your agent’s smarts.

Rosario De Chiara
Jun 25, 2025 ⋅ 5 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