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:

Getting Started With Claude 4 API: A Developer's Walkthrough

Getting started with Claude 4 API: A developer’s walkthrough

This guide explores how to use Anthropic’s Claude 4 models, including Opus 4 and Sonnet 4, to build AI-powered applications.

Andrew Baisden
Jul 3, 2025 ⋅ 16 min read
ai dev tool power rankings

AI dev tool power rankings & comparison [July 2025 edition]

Which AI frontend dev tool reigns supreme in July 2025? Check out our power rankings and use our interactive comparison tool to find out.

Chizaram Ken
Jul 2, 2025 ⋅ 3 min read
how API client automation can save you hours in development

How API client automation can save you hours in development

Learn how OpenAPI can automate API client generation to save time, reduce bugs, and streamline how your frontend app talks to backend APIs.

Lewis Cianci
Jul 1, 2025 ⋅ 7 min read
Interface Segregation Principle

SOLID series: Understanding the Interface Segregation Principle (ISP)

Discover how the Interface Segregation Principle (ISP) keeps your code lean, modular, and maintainable using real-world analogies and practical examples.

Oyinkansola Awosan
Jun 30, 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