React Cascading Menu

A powerful, customizable React cascading dropdown menu component with multi-selection, search functionality, and hierarchical navigation. Perfect for building complex category selectors, dependent dropdowns, and nested menu systems.

Cascading Menu is a multi-selectable cascading menu component for React. It enhances user experience and navigation efficiency with the following features:

• Navigation Efficiency: Searching and selecting options in traditional dependent dropdowns is difficult and time-consuming as the user needs to navigate through multiple dropdowns. Cascading Menu provides easy access to options through interactive selection or global search, making selection faster and more efficient.
• Enhanced User Experience: Understanding relationships between options in dependent dropdowns can be challenging. Cascading Menu provides a clear visual representation of the option hierarchy.

Key Benefits

• Global Search: Find options quickly across all levels
• Multi-Selection: Select multiple items at any level
• Customizable Themes: Light/dark themes with custom styling
• Layout Flexibility: Horizontal and vertical orientations

Features

1. Layout Mode/Orientation - Switch between horizontal and vertical layouts
2. Visual Hierarchy and Context Clarity - Clear parent-child relationships
3. Tag-Based Navigation and Deletion - Easy selection management
4. Interactive Selection and Deletion - Click to select/deselect
5. Search Capability - Global search across all menu levels
6. Multi/Single-Select Flexibility - Configure selection mode per level
7. Maintains Selection Order - Preserves user selection sequence
8. Theme Customization Options - Light/dark themes with custom styling

Use Cases

• E-commerce Category Filters: Product categorization (Electronics > Laptops > Gaming)
• Location Selectors: Country > State > City > Area selection
• Organizational Hierarchies: Department > Team > Role selection
• Content Management: Topic > Subtopic > Tag organization
• Configuration Panels: Settings with nested options

Installation

npm install react-cascading-menu

🎬 Demo

🔗 Live Demo | 📖 Documentation

🚀 Quick Start

import React, { useRef, useState } from "react";
import ReactCascadingMenu from "react-cascading-menu";
import { menuGroup } from "./data.js";

const CascadingMenu = () => {
  const ref = useRef();
  const [layout, setLayout] = useState("vertical");

  const fetchSelectionItemsLabels = () => {
    console.log(
      "get selections as label array",
      ref.current?.getAllItemsSelected()
    );
  };

  const fetchSelectionItems = () => {
    console.log("get selections", ref.current?.getSelection());
  };

  const changeLayout = () => {
    setLayout((prev) => (prev === "horizontal" ? "vertical" : "horizontal"));
  };

  return (
    <>
      <ReactCascadingMenu
        layout={layout}
        ref={ref}
        menuGroup={menuGroup}
        // selectedItems={preSelectedItems}
        isMultiSelection={true}
        displayValue="label"
        width={layout === "vertical" ? "40vw" : "60vw"}
        height="400px"
        theme="light"
      />
      <br />
      <button className="btn" onClick={fetchSelectionItems}>
        get selections
      </button>
      <button className="btn" onClick={fetchSelectionItemsLabels}>
        get selections as label array
      </button>
      <span>(Check console logs for results)</span>
      <div className="md-top">
        <button className="btn" onClick={changeLayout}>
          Change layout
        </button>
      </div>
    </>
  );
};

export default CascadingMenu;

Data Example

const menuGroup = {
  id: "1_101",
  groupHeading: "Country",
  options: [
    {
      id: "2_101",
      label: "United States",
      value: "United States",
      groupHeading: "State",
      options: [
        {
          id: "3_101",
          label: "New York",
          value: "New York",
          groupHeading: "City",
          options: [
            {
              id: "4_101",
              label: "New York City",
              value: "New York City",
              groupHeading: "Place",
              isMultiSelection: false,
              options: [
                {
                  id: "5_101",
                  label: "Statue of Liberty",
                  value: "Statue of Liberty",
                },
                {
                  id: "5_102",
                  label: "Central Park",
                  value: "Central Park",
                },
                {
                  id: "5_103",
                  label: "Empire State Building",
                  value: "Empire State Building",
                },
              ],
            },
          ],
        },
      ],
    },
  ],
};

Screenshots

🛠️ API Reference

Props

| Prop | Type | Default | Description | | ------------------ | ---------------------------- | ------------ | --------------------------- | | menuGroup | MenuGroup | required | Hierarchical data structure | | isMultiSelection | boolean | true | Enable multi-selection | | layout | 'horizontal' \| 'vertical' | 'vertical' | Menu orientation | | theme | 'light' \| 'dark' | 'light' | Color theme | | width | string | '100%' | Component width | | height | string | '300px' | Component height | | displayValue | string | 'label' | Key to display from options | | selectedItems | SelectedItem[] | [] | Pre-selected items |

Methods

| Method | Returns | Description | | ----------------------- | ---------------- | ---------------------------- | | getSelection() | SelectedItem[] | Get all selected items | | getAllItemsSelected() | string[] | Get selected labels as array |

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• NPM Package
• GitHub Repository
• Live Demo
• Report Issues

🏷️ Keywords

react dropdown cascading menu select multiselect search navigation ui-component typescript styled-components hierarchical tree-select category-selector dependent-dropdown