{"id":15031093,"url":"https://github.com/azouaoui-med/react-pro-sidebar","last_synced_at":"2025-04-23T20:51:35.845Z","repository":{"id":37391612,"uuid":"261783111","full_name":"azouaoui-med/react-pro-sidebar","owner":"azouaoui-med","description":"React Pro Sidebar provides a set of components for creating high level and customizable side navigation","archived":false,"fork":false,"pushed_at":"2025-04-02T02:57:47.000Z","size":4384,"stargazers_count":1776,"open_issues_count":4,"forks_count":412,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-09T23:38:25.891Z","etag":null,"topics":["dropdown-menus","menu","menus","npm","npm-package","react","react-component","reactjs","sidebar","submenu","submenus","tree-structure"],"latest_commit_sha":null,"homepage":"https://azouaoui-med.github.io/react-pro-sidebar/","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/azouaoui-med.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2020-05-06T14:24:16.000Z","updated_at":"2025-04-09T12:43:05.000Z","dependencies_parsed_at":"2024-01-13T19:23:06.964Z","dependency_job_id":"28d36023-795d-4694-989c-ab0a7c522829","html_url":"https://github.com/azouaoui-med/react-pro-sidebar","commit_stats":{"total_commits":277,"total_committers":10,"mean_commits":27.7,"dds":0.09747292418772568,"last_synced_commit":"950489d0b654acb3422c1a6796e8a774c455077d"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Freact-pro-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Freact-pro-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Freact-pro-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Freact-pro-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azouaoui-med","download_url":"https://codeload.github.com/azouaoui-med/react-pro-sidebar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248402524,"owners_count":21097331,"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":["dropdown-menus","menu","menus","npm","npm-package","react","react-component","reactjs","sidebar","submenu","submenus","tree-structure"],"created_at":"2024-09-24T20:14:53.409Z","updated_at":"2025-04-23T20:51:35.817Z","avatar_url":"https://github.com/azouaoui-med.png","language":"TypeScript","funding_links":[],"categories":["🌐 Web Development - Frontend"],"sub_categories":[],"readme":"# [React Pro Sidebar](https://www.npmjs.com/package/react-pro-sidebar)\n\n[![npm][version]][npm-url]\n[![License][license]][npm-url]\n[![Peer][peer]][npm-url]\n[![Download][download]][npm-url]\n[![Stars][stars]][github-url]\n\n[version]: https://img.shields.io/npm/v/react-pro-sidebar.svg?style=flat-square\n[license]: https://img.shields.io/github/license/azouaoui-med/react-pro-sidebar?style=flat-square\n[peer]: https://img.shields.io/npm/dependency-version/react-pro-sidebar/peer/react?style=flat-square\n[download]: https://img.shields.io/npm/dt/react-pro-sidebar?style=flat-square\n[stars]: https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social\n[npm-url]: https://www.npmjs.com/package/react-pro-sidebar\n[github-url]: https://github.com/azouaoui-med/react-pro-sidebar\n\nReact Pro Sidebar provides a set of components for creating high level and customizable side navigation\n\n## Old versions\n\n- [v0.x](https://github.com/azouaoui-med/react-pro-sidebar/tree/v0.x)\n\n## Live Preview\n\n- [Demo](https://azouaoui-med.github.io/react-pro-sidebar/iframe.html?id=playground--playground\u0026args=\u0026viewMode=story)\n\n- [Storybook](https://azouaoui-med.github.io/react-pro-sidebar/?path=/docs/sidebar--basic)\n\n## Screenshot\n\n![react-pro-sidebar](https://user-images.githubusercontent.com/25878302/212479928-553c2d37-793b-4bcd-ac53-352f26337955.jpg)\n\n## Installation\n\n### yarn\n\n```bash\nyarn add react-pro-sidebar\n```\n\n### npm\n\n```bash\nnpm install react-pro-sidebar\n```\n\n## Usage\n\n```jsx\nimport { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';\n\n\u003cSidebar\u003e\n  \u003cMenu\u003e\n    \u003cSubMenu label=\"Charts\"\u003e\n      \u003cMenuItem\u003e Pie charts \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e Line charts \u003c/MenuItem\u003e\n    \u003c/SubMenu\u003e\n    \u003cMenuItem\u003e Documentation \u003c/MenuItem\u003e\n    \u003cMenuItem\u003e Calendar \u003c/MenuItem\u003e\n  \u003c/Menu\u003e\n\u003c/Sidebar\u003e;\n```\n\n## Using React Router\n\nYou can make use of the `component` prop to integrate [React Router](https://reactrouter.com/en/main) link\n\n**Example Usage**\n\n```jsx\nimport { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';\nimport { Link } from 'react-router-dom';\n\n\u003cSidebar\u003e\n  \u003cMenu\n    menuItemStyles={{\n      button: {\n        // the active class will be added automatically by react router\n        // so we can use it to style the active menu item\n        [`\u0026.active`]: {\n          backgroundColor: '#13395e',\n          color: '#b6c8d9',\n        },\n      },\n    }}\n  \u003e\n    \u003cMenuItem component={\u003cLink to=\"/documentation\" /\u003e}\u003e Documentation\u003c/MenuItem\u003e\n    \u003cMenuItem component={\u003cLink to=\"/calendar\" /\u003e}\u003e Calendar\u003c/MenuItem\u003e\n    \u003cMenuItem component={\u003cLink to=\"/e-commerce\" /\u003e}\u003e E-commerce\u003c/MenuItem\u003e\n  \u003c/Menu\u003e\n\u003c/Sidebar\u003e;\n```\n\n## Customization\n\nWe provide for each component `rootStyles` prop that can be used to customize the styles\n\nits recommended using utility classes (`sidebarClasses`, `menuClasses`) for selecting target child nodes\n\n**Example usage**\n\n```jsx\n\u003cSidebar\n  rootStyles={{\n    [`.${sidebarClasses.container}`]: {\n      backgroundColor: 'red',\n    },\n  }}\n\u003e\n  // ...\n\u003c/Sidebar\u003e\n```\n\nFor `Menu` component, in addition to `rootStyles` you can also use `menuItemStyles` prop for customizing all `MenuItem` \u0026 `SubMenu` components and their children\n\n**Type definition**\n\n```jsx\ninterface MenuItemStyles {\n  root?: ElementStyles;\n  button?: ElementStyles;\n  label?: ElementStyles;\n  prefix?: ElementStyles;\n  suffix?: ElementStyles;\n  icon?: ElementStyles;\n  subMenuContent?: ElementStyles;\n  SubMenuExpandIcon?: ElementStyles;\n}\n\ntype ElementStyles = CSSObject | ((params: MenuItemStylesParams) =\u003e CSSObject | undefined);\n```\n\n**Example usage**\n\n```jsx\n\u003cSidebar\u003e\n  \u003cMenu\n    menuItemStyles={{\n      button: ({ level, active, disabled }) =\u003e {\n        // only apply styles on first level elements of the tree\n        if (level === 0)\n          return {\n            color: disabled ? '#f5d9ff' : '#d359ff',\n            backgroundColor: active ? '#eecef9' : undefined,\n          };\n      },\n    }}\n  \u003e\n    //...\n  \u003c/Menu\u003e\n\u003c/Sidebar\u003e\n```\n\n## API\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eComponent\u003c/th\u003e\n            \u003cth\u003eProp\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n            \u003cth\u003eDefault\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd rowspan=13\u003eSidebar\u003c/td\u003e\n            \u003ctd \u003edefaultCollapsed\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eInitial collapsed status\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecollapsed\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eSidebar collapsed state\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etoggled\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eSidebar toggled state\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ewidth\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003enumber | string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eWidth of the sidebar\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e270px\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecollapsedWidth\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003enumber | string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eWidth of the sidebar on collapsed state\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e80px\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebackgroundColor\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eSet background color for sidebar\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003ergb(249, 249, 249, 0.7)\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eimage\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eUrl of the image to use in the sidebar background, need to apply transparency to background color \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebreakPoint\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003exs\u003c/code\u003e | \u003ccode\u003esm\u003c/code\u003e | \u003ccode\u003emd\u003c/code\u003e | \u003ccode\u003elg\u003c/code\u003e | \u003ccode\u003exl\u003c/code\u003e | \u003ccode\u003exxl\u003c/code\u003e | \u003ccode\u003eall\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eSet when the sidebar should trigger responsiveness behavior \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecustomBreakPoint\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eSet custom breakpoint value, this will override breakPoint prop \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etransitionDuration\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eDuration for the transition in milliseconds to be used in collapse and toggle behavior\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e300\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ertl\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eRTL direction\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003erootStyles\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eCSSObject\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eApply styles to sidebar element\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonBackdropClick\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e() =\u003e void\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eCallback function to be called when backdrop is clicked\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd rowspan=5\u003eMenu\u003c/td\u003e\n            \u003ctd\u003ecloseOnClick\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e and sidebar is in collapsed state, submenu popper will automatically close on MenuItem click\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003emenuItemStyles\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eMenuItemStyles\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eApply styles to MenuItem and SubMenu components and their children \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003erenderExpandIcon\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) =\u003e React.ReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eRender method for customizing submenu expand icon\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003etransitionDuration\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eTransition duration in milliseconds to use when sliding submenu content\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e300\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003erootStyles\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eCSSObject\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eApply styles from Menu root element\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd rowspan=7\u003eMenuItem\u003c/td\u003e\n            \u003ctd\u003eicon\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eIcon for the menu item \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003eactive\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, the component is active\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003edisabled\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, the component is disabled \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003eprefix\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eAdd a prefix to the menuItem \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003esuffix\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eAdd a suffix to the menuItem \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003ecomponent\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003estring | ReactElement\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eA component used for menu button node, can be string (ex: 'div') or a component \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003erootStyles\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eCSSObject\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eApply styles to MenuItem element\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd rowspan=11\u003eSubMenu\u003c/td\u003e\n            \u003ctd\u003elabel\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003estring | ReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eLabel for the submenu \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003eicon\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eIcon for submenu\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003edefaultOpen\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eSet if the submenu is open by default\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003eopen\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eSet open value if you want to control the state\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eactive\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, the component is active\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003edisabled\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, the component is disabled \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eprefix\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eAdd a prefix to the submenu \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003esuffix\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eReactNode\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eAdd a suffix to the submenu \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonOpenChange\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e(open: boolean) =\u003e void\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eCallback function called when submenu state changes\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecomponent\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003estring | React.ReactElement\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eA component used for menu button node, can be string (ex: 'div') or a component \u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003erootStyles\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eCSSObject\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eApply styles to SubMenu element\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\n\u003c/table\u003e\n\n## License\n\nMIT © [Mohamed Azouaoui](https://azouaoui.netlify.app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazouaoui-med%2Freact-pro-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazouaoui-med%2Freact-pro-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazouaoui-med%2Freact-pro-sidebar/lists"}