Multi Level drop-down in ReactJS

Question

I'm trying to implement multilevel nested drop-down. I have made use of "react-dropdown". A new dropdown that appears so be displayed just below. But I'm unable to implement nested dropdown.

what to achieve something like this

this is my output

import React from "react";
import Dropdown from "react-dropdown";
import 'react-dropdown/style.css';

const object = [
    {value: 'course', 
    lable: "course" , 
    submenu: [
        { value: "PCF8883US/7EA/1Y", lable: "PCF8883US/7EA/1Y"},
        { value: "AT42QT1050-UUR", lable: "AT42QT1050-UUR" },
        { value: "PCF8883", lable: "PCF8883"} 
        ]
    },
    {value: "code", 
    lable:"code",
    submenu: [
        { value: "MC3672", lable: "MC3672"},
        { value: "MXC400XXC", lable: "MXC400XXC"}
        ]
    }
]

const course = [
    { value: "PCF8883US/7EA/1Y", lable: "PCF8883US/7EA/1Y"},
    { value: "AT42QT1050-UUR", lable: "AT42QT1050-UUR" },
    { value: "PCF8883", lable: "PCF8883"} 
]

const code = [
    { value: "MC3672", lable: "MC3672"},
    { value: "MXC400XXC", lable: "MXC400XXC"}
]

export class WorkSpace extends React.Component {
    render() {
        return (
            <div className="base_container">
                <div className="left">
                    <h3>Select Component</h3>
                    <div>
                    <Dropdown options={object} placeholder="Name">
                        <Dropdown options={course} onChange={this._onSelect} placeholder="course" />
                        <Dropdown options={code} onChange={this._onSelect} placeholder="code"/>
                    </Dropdown>
                    </div> 
                </div>    
            </div>
        );
    }
}

From it's source react-dropdown is not meant for nested selections github.com/fraserxu/react-dropdown/blob/master/index.js You can extend on react-select, react-dropdown-tree-select or antd select to achieve this. Found a similar ask and answer here: stackoverflow.com/questions/53119912/… — ksankar
– ksankar, Commented Feb 15, 2020 at 9:51

Jordan Rolph · Accepted Answer · 2020-02-15 10:02:53Z

0

You could try the library React Treebeard. It gives a UI almost exactly like your example.

answered Feb 15, 2020 at 10:02

Jordan Rolph

1,3681 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swati Dhadekar Over a year ago

I have tried implementing React Treebeard and it works. thank you. But I'm unable to apply a style (CSS) to Treebeard. it's taking the default

Jordan Rolph Over a year ago

I've checked the docs for you. For custom styling, Treebeard expects a style prop as an object. Here is the default object github.com/storybookjs/react-treebeard/blob/master/src/themes/… . Copy this structure to override the styles you want to

DineshMsd · Accepted Answer · 2024-02-01 16:55:52Z

Adding this answer for future readers, and I hope it may be helpful for someone. I created basic three-level multi-level menu dropdown.

The dropdown renders the below data:

[
    {
      id: 1,
      label: 'Menu 1',
      isOpen: false,
      children: [
        {
          id: 11,
          label: 'Item 1',
          isOpen: false,
          subChildren: ['Subitem 1', 'Subitem 2', 'Subitem 3'],
        },
        {
          id: 12,
          label: 'Item 2',
          isOpen: false,
          subChildren: ['Subitem 4', 'Subitem 5', 'Subitem 6'],
        },
        {
          id: 13,
          label: 'Item 3',
          isOpen: false,
          subChildren: ['Subitem 7', 'Subitem 8', 'Subitem 9'],
        },
      ],
    }

Adding the whole implementation:

import React, { useState } from 'react';
import './NestedDropdownMenu.css';

const NestedDropdownMenu = () => {
  const [menuItems, setMenuItems] = useState([
    {
      id: 1,
      label: 'Menu 1',
      isOpen: false,
      children: [
        {
          id: 11,
          label: 'Item 1',
          isOpen: false,
          subChildren: ['Subitem 1', 'Subitem 2', 'Subitem 3'],
        },
        {
          id: 12,
          label: 'Item 2',
          isOpen: false,
          subChildren: ['Subitem 4', 'Subitem 5', 'Subitem 6'],
        },
        {
          id: 13,
          label: 'Item 3',
          isOpen: false,
          subChildren: ['Subitem 7', 'Subitem 8', 'Subitem 9'],
        },
      ],
    },
    {
      id: 2,
      label: 'Menu 2',
      isOpen: false,
      children: [
        {
          id: 21,
          label: 'Item 4',
          isOpen: false,
          subChildren: ['Subitem 10', 'Subitem 11', 'Subitem 12'],
        },
        {
          id: 22,
          label: 'Item 5',
          isOpen: false,
          subChildren: ['Subitem 13', 'Subitem 14', 'Subitem 15'],
        },
        {
          id: 23,
          label: 'Item 6',
          isOpen: false,
          subChildren: ['Subitem 16', 'Subitem 17', 'Subitem 18'],
        },
      ],
    },
    {
      id: 3,
      label: 'Menu 3',
      isOpen: false,
      children: [
        {
          id: 31,
          label: 'Item 7',
          isOpen: false,
          subChildren: ['Subitem 19', 'Subitem 20', 'Subitem 21'],
        },
        {
          id: 32,
          label: 'Item 8',
          isOpen: false,
          subChildren: ['Subitem 22', 'Subitem 23', 'Subitem 24'],
        },
        {
          id: 33,
          label: 'Item 9',
          isOpen: false,
          subChildren: ['Subitem 25', 'Subitem 26', 'Subitem 27'],
        },
      ],
    },
  ]);

  const toggleMenu = (id) => {
    console.log(`Menu ${id} clicked`);
    setMenuItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, isOpen: !item.isOpen } : item
      )
    );
  };

  const toggleChildMenu = (parentId, childId) => {
    console.log(`Child Item ${childId} in Menu ${parentId} clicked`);
    setMenuItems((prevItems) =>
      prevItems.map((item) =>
        item.id === parentId
          ? {
              ...item,
              children: item.children.map((child) =>
                child.id === childId
                  ? { ...child, isOpen: !child.isOpen }
                  : child
              ),
            }
          : item
      )
    );
  };

  return (
    <div className="nested-dropdown-menu">
      {menuItems.map((item) => (
        <div key={item.id}>
          <div
            className={`menu-item ${item.isOpen ? 'open' : ''}`}
            onClick={() => toggleMenu(item.id)}
          >
            {item.label}
          </div>
          {item.isOpen && (
            <div className="submenu">
              {item.children.map((child) => (
                <div key={child.id}>
                  <div
                    className={`menu-item ${child.isOpen ? 'open' : ''}`}
                    onClick={() => toggleChildMenu(item.id, child.id)}
                  >
                    {child.label}
                  </div>
                  {child.isOpen && (
                    <div className="subsubmenu">
                      {child.subChildren.map((subChild, index) => (
                        <div key={index} className="submenu-item">
                          {subChild}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export default NestedDropdownMenu;

Also please find a working demo of the above implementation in stackblitz: https://stackblitz.com/edit/stackblitz-starters-elbujp?file=src%2FApp.js

multi-level-dropdown-stackblitz-link

Collectives™ on Stack Overflow

Multi Level drop-down in ReactJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related