2023-11-06
5240
#react
Ibadehin Mojeed
88679
Nov 6, 2023 ⋅ 18 min read

How to create a multilevel dropdown menu in React

Ibadehin Mojeed I'm an advocate of project-based learning. I also write technical content around web development.

Recent posts:

How To Integrate WunderGraph With Your Frontend Application

How to integrate WunderGraph with your frontend application

Unify and simplify APIs using WunderGraph to integrate REST, GraphQL, and databases in a single endpoint.

Boemo Mmopelwa
May 17, 2024 ⋅ 5 min read
Understanding The Latest Webkit Features In Safari 17.4

Understanding the latest Webkit features in Safari 17.4

The Safari 17.4 update brought in many modern features and bug fixes. Explore the major development-specific updates you should be aware of.

Rahul Chhodde
May 16, 2024 ⋅ 10 min read
Using Webrtc To Implement Peer To Peer Video Streaming In A Node Js Project

Using WebRTC to implement P2P video streaming

Explore one of WebRTC’s major use cases in this step-by-step tutorial: live peer-to-peer audio and video streaming between systems.

Oduah Chigozie
May 16, 2024 ⋅ 18 min read
Htmx Vs React

htmx vs. React: Choosing the right library for your project

Both htmx and React provide powerful tools for building web apps, but in different ways that are suited to different types of projects.

Temitope Oyedele
May 15, 2024 ⋅ 9 min read
View all posts

28 Replies to "How to create a multilevel dropdown menu in React"

  1. hello bro assalaam alaikum
    Thanks for your code.
    I have loved the code of your multi level dropdown in react.
    I have a query . please help me.
    How to open a page after clicking on the any dropdown menu item. Please share me the code.

  2. Hello Ibadehin Mojeed ,
    Thank you for this. but I just have concern.I was trying fetch the specific id of the json file whenever I clicked on specific menu items. ( I used a mulitlevel data with id for every menu and submenu.. ) but I am having an error about this

    1. Hi Van, you are welcome. In your case, you need to pass along the id to the onClick event.

      So instead of having this:
      “onClick={() => setDropdown((prev) => !prev)}”,

      you will have something like this:
      “onClick={items.id ? () => handleClick(items.id) : null}”.

      Then define an handleClick handler above the return statement like so:

      const handleClick = (id) => {
      console.log(id);
      setDropdown((prev) => !prev);
      };

      That way, you will have access to the dropdown button IDs. For the link IDs, ensure you add the same onClick to the link element. I hope that solves your code issues.

      Thank you.

  3. Hi Ibadehin Mojeed,

    I am finding this kind of coding everywhere! I am very grateful for this code but I got a question how do u enable the “Service” dropdown into a clickable button? since i want it to be able to go to the “/serivce” page, I have already try everything and i still cannot do it, can you help me?

    1. Hello Hikari,

      I’m sorry for the oversight. I just saw your comment. This kind of coding/implementation is the ideal way that is why you find it everywhere. See the nav bar menu for logrocket.com, gatsbyjs.com or google.com/chrome. However, we can easily enable a dropdown menu like “Services” into a clickable button while still showing the dropdown on hover. For this, I created a GitHub repo to show the implementation: https://github.com/Ibaslogic/react-multilevel-dropdown_v2/blob/main/src/components/MenuItems.js.

      The focus is the MenuItems component and the menuItems.js file that is holding the menu data. In the MenuItems component, we check if an item has a URL and submenu, then, we make it clickable while still showing a dropdown on hover. If no URL, we only show hover without linking the button. Else, we render a simple element.

      I hope this solves the coding problem you have. Thank you for reading through.

  4. I’m very grateful for this tutorial, it was just what I needed.

    HOWEVER, like Anjum, I’m struggling getting things to happen when I click on the leaf nodes of the menu structure. I’m struggling thru the react-router tutorial that you referred Anjum to, but it would be better if you could enhance this tutorial to explain that. That tutorial is even longer than this one.

      1. I got a simple multi-level menu bar working in my app with a bit of effort. I’m using “<a>” elements to switch between screens in my app and that mostly worked but causes problems because it causes a full page refresh (so I lost state and so on). So then I replaced it with “” and that solves the page refresh problem, but it introduces a new problem that the dropdown sticks around too long.

  5. Hello brother
    please help me.
    How to open a page after clicking on the any dropdown menu item. Please share me the code.

  6. Slaam bro,
    brother its not working on small screen even i have install your clone project fom github.
    Kindly guid me if u can how to resolve the issue.
    Waiting for your response
    Thanks

    1. Salam Imran,

      I just deployed the code to Heroku, https://multilevel-dropdown.herokuapp.com/ and it works as expected. Be aware that in the final code, we enabled a single-level dropdown on a smaller screen for a better user experience. See the last section of the article. You can ignore the last section if you still want a multi-level on a smaller screen. This article showcase all the different logic you can enable for a dropdown. Please follow the article without missing any sections. Thank you.

  7. I needed this tutorial, so I’m grateful
    I need something else though, can you share with me how to be able to travel through the menu with up and down arrow buttons?

  8. Hi Ibadehin Mojeed,
    Your tutorial was so helpful. I have a scenario like the list menu should be displayed to left and if we click on the parent element the dropdown must be displayed and that must not have the mouseevnts and for the sub-sub-menu no need of click event but it requries mouse events could you suggest me on this.
    Thanks in advance

  9. Pasindu Induwara,
    hello brother, Great work. this helped me a lot for one of my assignment. and it worked perfectly well. and guided perfectly as well. Thank you for sharing your knowledge brother. well done.

  10. This guide is very poorly written in my opinion. Critical steps are being left for the user to figure out, but also the naming of variables, files and overall structure of files doesn’t make any sense whatsoever, adding to the confusion of something which should be an easy matter.

    Besides, why are they so many different files just passing information one to each other ?
    Better would be to pack all menuItems in one file and one place, instead of this reach-around method shown here.

    1. Hello Stefan,

      Thank you for taking the time to read and provide feedback. Kindly note that this guide assumes a foundational understanding of React. React, being a library based on components, is why we have various component files. I assure you, that constructing a multi-level dropdown capable of seamless scalability to any level of nesting requires careful organization of files, as demonstrated in this tutorial.

      We have endeavored to cover various logical aspects that come into play when developing such a UI. Once more, your input is greatly appreciated.

      1. I totally agree with you Mojeed. Well done, I enjoyed the tutorial even though I am new to React, I was able to setup the app without much issues.

  11. I have this set up and it works nice, but I do have one issue that I am stumped on. I would like an open menu dropdown to close when another option is selected, but currently both of my menus are still open. The only way to close them is to click on the main navbar menu head again to swap the aria-expanded to false.

    Any ideas on how to approach? I think my methods do not work because they are always going off of the element that is clicked, and not looking for the one that was set to true.

    1. Hi Matt,

      Apologies for the oversight. Regarding the code issue you raised, it appears there might be an error on your end. After reviewing the code, I didn’t encounter the scenario where selecting an option fails to close another open menu.

      I recommend cloning the project to observe its functionality and then making adjustments as necessary.

      Clone the project using the following command:

      git clone https://github.com/Ibaslogic/react-multilevel-dropdown-menu

      If the problem persists, please share the code of your project, and I’ll be happy to assist.

      Thank you.

      1. I pulled down your repo, and I am starting to see the differences between what my predecessors made to the code compared to the pulled down version. Our menus work on clicking them, and that is what sets the value to TRUE to display them forcing the user to click the menu item again to return it back to false to hide it. I am going to try to rework it some and see if I can get it behaving like we need it to.

        I appreciate you getting back to me, and sharing your code.

Leave a Reply