{"id":13496412,"url":"https://github.com/cdes/react-headless-nested-menu","last_synced_at":"2025-03-28T18:32:01.074Z","repository":{"id":143905419,"uuid":"295787385","full_name":"cdes/react-headless-nested-menu","owner":"cdes","description":"A useful headless component (hook) that gives you all the functions you need to create a multi-level menu using your own components!","archived":false,"fork":false,"pushed_at":"2020-10-09T14:18:24.000Z","size":387,"stargazers_count":9,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T12:00:07.107Z","etag":null,"topics":["headless-components","headless-ui","hooks","menu","multi-level-menu","nested-menus","typescript"],"latest_commit_sha":null,"homepage":"https://cdes.github.io/react-headless-nested-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/cdes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2020-09-15T16:31:00.000Z","updated_at":"2023-05-12T17:00:37.000Z","dependencies_parsed_at":"2024-01-16T09:53:56.186Z","dependency_job_id":"1b3fa46b-9379-4f83-96a6-dcdc92421484","html_url":"https://github.com/cdes/react-headless-nested-menu","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdes%2Freact-headless-nested-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdes%2Freact-headless-nested-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdes%2Freact-headless-nested-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdes%2Freact-headless-nested-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdes","download_url":"https://codeload.github.com/cdes/react-headless-nested-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246080740,"owners_count":20720580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["headless-components","headless-ui","hooks","menu","multi-level-menu","nested-menus","typescript"],"created_at":"2024-07-31T19:01:47.503Z","updated_at":"2025-03-28T18:31:58.606Z","avatar_url":"https://github.com/cdes.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![React Headless Nested Menu Logo](https://github.com/cdes/react-headless-nested-menu/raw/master/images/logo.png)\n\n# React Headless Nested Menu\n\nA useful headless component (hook) that gives you all the functions you need to create a multi-level menu using your own components!\n\n### Features\n\n- Only functionality, no need to fight with CSS classes and overrides to customize your menu.\n- Created in TypeScript, so you get types out of the box.\n- Fully configurable behavior (open on click or hover).\n\n![React Headless Nested Menu Logo](https://github.com/cdes/react-headless-nested-menu/raw/master/images/preview.png)\n\n### Installation\n\n```bash\nyarn add react-headless-nested-menu\n```\n\n### Usage\n\nYou can import the generated bundle to use the whole library generated by this starter:\n\n```javascript\nimport React from \"react\";\nimport { useNestedMenu } from \"react-headless-nested-menu\";\n\nfunction App() {\n  const {\n    getToggleButtonProps,\n    getMenuProps,\n    getItemProps,\n    getOpenTriggerProps,\n    getCloseTriggerProps,\n    getMenuOffsetStyles,\n    isOpen,\n    isSubMenuOpen,\n    toggleMenu\n  } = useNestedMenu({\n    items\n  });\n\n  const [item, setItem] = useState\u003cMenuItem\u003e();\n\n  // your custom function to render items\n  const renderItem = (item: MenuItem) =\u003e (\n    \u003cdiv\n      {...getItemProps(item)}\n      className=\"relative my-1 first:mt-0 last:mb-0\"\n      {...getOpenTriggerProps(\"onPointerEnter\", item)}\n      onClick={(event) =\u003e {\n        event.stopPropagation();\n        setItem(item);\n        toggleMenu();\n      }}\n    \u003e\n      \u003cdiv\n        className={classnames(\n          \"flex flex-row justify-between items-center rounded-lg flex-1 h-8 flex items-center px-2\",\n          {\n            \"text-gray-600 hover:text-gray-800 hover:bg-gray-200\": !isSubMenuOpen(\n              item\n            ),\n            \"text-gray-800 bg-gray-200\": isSubMenuOpen(item)\n          }\n        )}\n      \u003e\n        {item.label}\n        {item.subMenu \u0026\u0026 \u003cChevron /\u003e}\n      \u003c/div\u003e\n\n      {/* Only show submenu when there's a submenu \u0026 it's open */}\n      {item.subMenu \u0026\u0026 isSubMenuOpen(item) \u0026\u0026 renderMenu(item.subMenu, item)}\n    \u003c/div\u003e\n  );\n\n  // your custom function to render menus (root menu \u0026 sub-menus)\n  const renderMenu = (items: Items, parentItem?: MenuItem) =\u003e (\n    \u003cdiv\n      {...getMenuProps(parentItem)}\n      style={{\n        position: \"absolute\",\n        ...getMenuOffsetStyles(parentItem)\n      }}\n      className={classnames(\n        \"bg-white p-2 shadow-lg rounded-lg select-none border border-gray-100 relative z-10\",\n        {\n          \"ms-2\": typeof parentItem === \"undefined\", //for root menu\n          \"-mt-3\": typeof parentItem !== \"undefined\" //for submenus only\n        }\n      )}\n      {...getCloseTriggerProps(\"onPointerLeave\", parentItem)}\n    \u003e\n      \u003cdiv\u003e{items.map((item) =\u003e renderItem(item))}\u003c/div\u003e\n\n      {/* add hit area */}\n      {parentItem \u0026\u0026 (\n        \u003cdiv\n          style={{\n            position: \"absolute\",\n            top: -8,\n            bottom: -8,\n            left: -8,\n            right: -8,\n            zIndex: -1\n          }}\n        \u003e\u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n\n  return (\n    \u003cdiv className=\"w-64 p-4 rounded-lg flex flex-col ms-4 mt-4\"\u003e\n      \u003cbutton\n        className=\"text-gray-600 border-2 border-gray-600 rounded-lg h-10 focus:outline-none\"\n        {...getToggleButtonProps()}\n      \u003e\n        {item ? item.label : \"Open Menu\"}\n      \u003c/button\u003e\n      {isOpen \u0026\u0026 renderMenu(items)}\n    \u003c/div\u003e\n  );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReact.render(\u003cApp /\u003e, rootElement);\n```\n\n## To do\n\n- Improve documentation.\n- Add more example.\n- Add tests.\n- Use popper for positioning menus.\n\n## Examples\n\n- [CodeSandbox: Using Tailwind](https://codesandbox.io/s/react-headless-nested-menu-tailwind-19k83?file=/src/App.tsx)\n\n## Credits\n\n- [typescript-library-starter](https://github.com/alexjoverm/typescript-library-starter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdes%2Freact-headless-nested-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdes%2Freact-headless-nested-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdes%2Freact-headless-nested-menu/lists"}