{"id":15043387,"url":"https://github.com/vinayv-456/react-cascading-menu","last_synced_at":"2026-01-20T20:02:47.668Z","repository":{"id":227492661,"uuid":"766357867","full_name":"vinayv-456/react-cascading-menu","owner":"vinayv-456","description":"React-Cascading-Menu is a multi-selectable cascading dropdown component for React, providing horizontal/vertical navigation and global search for efficient option selection.","archived":false,"fork":false,"pushed_at":"2025-07-05T01:47:31.000Z","size":2184,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T11:20:02.659Z","etag":null,"topics":["dsa","reactjs-es6","recursion","styled-components","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://vinayv-456.github.io/react-cascading-menu/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinayv-456.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-03-03T03:14:02.000Z","updated_at":"2025-07-05T01:47:34.000Z","dependencies_parsed_at":"2024-04-01T00:20:29.163Z","dependency_job_id":"c12545dd-20b7-4f7a-a284-ee0b42c9c56e","html_url":"https://github.com/vinayv-456/react-cascading-menu","commit_stats":null,"previous_names":["vinayv-456/react-cascading-menu","vinayv-456/react-cascading-dropdown"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vinayv-456/react-cascading-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayv-456%2Freact-cascading-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayv-456%2Freact-cascading-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayv-456%2Freact-cascading-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayv-456%2Freact-cascading-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinayv-456","download_url":"https://codeload.github.com/vinayv-456/react-cascading-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayv-456%2Freact-cascading-menu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28612157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T18:56:40.769Z","status":"ssl_error","status_checked_at":"2026-01-20T18:54:26.653Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dsa","reactjs-es6","recursion","styled-components","typescript","webpack"],"created_at":"2024-09-24T20:48:57.135Z","updated_at":"2026-01-20T20:02:47.662Z","avatar_url":"https://github.com/vinayv-456.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Cascading Menu\n\n[![npm version](https://badge.fury.io/js/react-cascading-menu.svg)](https://badge.fury.io/js/react-cascading-menu)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA 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.\n\n**Cascading Menu** is a multi-selectable cascading menu component for React. It enhances user experience and navigation efficiency with the following features:\n\n- **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.\n- **Enhanced User Experience**: Understanding relationships between options in dependent dropdowns can be challenging. Cascading Menu provides a clear visual representation of the option hierarchy.\n\n## Key Benefits\n\n- **Global Search**: Find options quickly across all levels\n- **Multi-Selection**: Select multiple items at any level\n- **Customizable Themes**: Light/dark themes with custom styling\n- **Layout Flexibility**: Horizontal and vertical orientations\n\n## Features\n\n1. **Layout Mode/Orientation** - Switch between horizontal and vertical layouts\n2. **Visual Hierarchy and Context Clarity** - Clear parent-child relationships\n3. **Tag-Based Navigation and Deletion** - Easy selection management\n4. **Interactive Selection and Deletion** - Click to select/deselect\n5. **Search Capability** - Global search across all menu levels\n6. **Multi/Single-Select Flexibility** - Configure selection mode per level\n7. **Maintains Selection Order** - Preserves user selection sequence\n8. **Theme Customization Options** - Light/dark themes with custom styling\n\n## Use Cases\n\n- **E-commerce Category Filters**: Product categorization (Electronics \u003e Laptops \u003e Gaming)\n- **Location Selectors**: Country \u003e State \u003e City \u003e Area selection\n- **Organizational Hierarchies**: Department \u003e Team \u003e Role selection\n- **Content Management**: Topic \u003e Subtopic \u003e Tag organization\n- **Configuration Panels**: Settings with nested options\n\n## Installation\n\n```sh\nnpm install react-cascading-menu\n```\n\n## 🎬 Demo\n\n![React Cascading Menu Demo](https://github.com/user-attachments/assets/159c9e0e-5474-4099-ba03-36272d9eab09)\n\n[**🔗 Live Demo**](https://vinayv-456.github.io/react-cascading-menu/) | [**📖 Documentation**](https://github.com/vinayv-456/react-cascading-menu#readme)\n\n## 🚀 Quick Start\n\n```jsx\nimport React, { useRef, useState } from \"react\";\nimport ReactCascadingMenu from \"react-cascading-menu\";\nimport { menuGroup } from \"./data.js\";\n\nconst CascadingMenu = () =\u003e {\n  const ref = useRef();\n  const [layout, setLayout] = useState(\"vertical\");\n\n  const fetchSelectionItemsLabels = () =\u003e {\n    console.log(\n      \"get selections as label array\",\n      ref.current?.getAllItemsSelected()\n    );\n  };\n\n  const fetchSelectionItems = () =\u003e {\n    console.log(\"get selections\", ref.current?.getSelection());\n  };\n\n  const changeLayout = () =\u003e {\n    setLayout((prev) =\u003e (prev === \"horizontal\" ? \"vertical\" : \"horizontal\"));\n  };\n\n  return (\n    \u003c\u003e\n      \u003cReactCascadingMenu\n        layout={layout}\n        ref={ref}\n        menuGroup={menuGroup}\n        // selectedItems={preSelectedItems}\n        isMultiSelection={true}\n        displayValue=\"label\"\n        width={layout === \"vertical\" ? \"40vw\" : \"60vw\"}\n        height=\"400px\"\n        theme=\"light\"\n      /\u003e\n      \u003cbr /\u003e\n      \u003cbutton className=\"btn\" onClick={fetchSelectionItems}\u003e\n        get selections\n      \u003c/button\u003e\n      \u003cbutton className=\"btn\" onClick={fetchSelectionItemsLabels}\u003e\n        get selections as label array\n      \u003c/button\u003e\n      \u003cspan\u003e(Check console logs for results)\u003c/span\u003e\n      \u003cdiv className=\"md-top\"\u003e\n        \u003cbutton className=\"btn\" onClick={changeLayout}\u003e\n          Change layout\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default CascadingMenu;\n```\n\n### Data Example\n\n```jsx\nconst menuGroup = {\n  id: \"1_101\",\n  groupHeading: \"Country\",\n  options: [\n    {\n      id: \"2_101\",\n      label: \"United States\",\n      value: \"United States\",\n      groupHeading: \"State\",\n      options: [\n        {\n          id: \"3_101\",\n          label: \"New York\",\n          value: \"New York\",\n          groupHeading: \"City\",\n          options: [\n            {\n              id: \"4_101\",\n              label: \"New York City\",\n              value: \"New York City\",\n              groupHeading: \"Place\",\n              isMultiSelection: false,\n              options: [\n                {\n                  id: \"5_101\",\n                  label: \"Statue of Liberty\",\n                  value: \"Statue of Liberty\",\n                },\n                {\n                  id: \"5_102\",\n                  label: \"Central Park\",\n                  value: \"Central Park\",\n                },\n                {\n                  id: \"5_103\",\n                  label: \"Empire State Building\",\n                  value: \"Empire State Building\",\n                },\n              ],\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n```\n\n## Screenshots\n\n![React Cascading Menu - Vertical Layout](https://github.com/user-attachments/assets/aa80d7ef-f008-4807-8ad4-87a5ccac2ad4)\n![React Cascading Menu - Horizontal Layout](https://github.com/user-attachments/assets/894fbef2-f564-444f-b9ee-4620acc7febd)\n\n## 🛠️ API Reference\n\n### Props\n\n| Prop               | Type                         | Default      | Description                 |\n| ------------------ | ---------------------------- | ------------ | --------------------------- |\n| `menuGroup`        | `MenuGroup`                  | required     | Hierarchical data structure |\n| `isMultiSelection` | `boolean`                    | `true`       | Enable multi-selection      |\n| `layout`           | `'horizontal' \\| 'vertical'` | `'vertical'` | Menu orientation            |\n| `theme`            | `'light' \\| 'dark'`          | `'light'`    | Color theme                 |\n| `width`            | `string`                     | `'100%'`     | Component width             |\n| `height`           | `string`                     | `'300px'`    | Component height            |\n| `displayValue`     | `string`                     | `'label'`    | Key to display from options |\n| `selectedItems`    | `SelectedItem[]`             | `[]`         | Pre-selected items          |\n\n### Methods\n\n| Method                  | Returns          | Description                  |\n| ----------------------- | ---------------- | ---------------------------- |\n| `getSelection()`        | `SelectedItem[]` | Get all selected items       |\n| `getAllItemsSelected()` | `string[]`       | Get selected labels as array |\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🔗 Links\n\n- [NPM Package](https://www.npmjs.com/package/react-cascading-menu)\n- [GitHub Repository](https://github.com/vinayv-456/react-cascading-menu)\n- [Live Demo](https://vinayv-456.github.io/react-cascading-menu/)\n- [Report Issues](https://github.com/vinayv-456/react-cascading-menu/issues)\n\n## 🏷️ Keywords\n\n`react` `dropdown` `cascading` `menu` `select` `multiselect` `search` `navigation` `ui-component` `typescript` `styled-components` `hierarchical` `tree-select` `category-selector` `dependent-dropdown`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayv-456%2Freact-cascading-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinayv-456%2Freact-cascading-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayv-456%2Freact-cascading-menu/lists"}