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:

next js environmental variables

How to configure Next.js environmental variables

Learn how to manage environment variables in Next.js, which influence how an application behaves in different contexts and environments.

Joseph Mawa
Apr 25, 2025 ⋅ 9 min read
useActionState in React

useActionState in React: A practical guide with examples

Discover how React’s useActionState Hook makes it easier to handle user actions, especially form submissions and async state changes.

Rishi Purwar
Apr 25, 2025 ⋅ 5 min read
three js vs babylon js

Three.js vs. Babylon.js: Which is better for 3D web development?

Compare two libraries that support creating 3D experiences in the browser. Learn how to get started with each, their core features, and key differences.

Elijah Asaolu
Apr 24, 2025 ⋅ 7 min read
how to use the Next.js Image component to optimize images

How to use the Next.js Image component to optimize images

Explore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.

Adebiyi Adedotun
Apr 23, 2025 ⋅ 7 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