{"id":11635,"library":"rc-menu","title":"rc-menu: Core React Menu Component","description":"rc-menu is a foundational, unstyled React UI component designed for building highly customizable and accessible hierarchical menus. It provides the core logic and composable primitives like `Menu`, `SubMenu`, and `MenuItem`, offering developers extensive control over styling and behavior. While widely adopted, the `rc-menu` package, currently at version `9.16.1`, is in a maintenance-only state with its last publish over a year ago. Active development and new features have migrated to the `@rc-component/menu` package (latest v1.2.0), which is the recommended choice for new projects and for existing users looking for ongoing support and enhancements. This component is often used as a base for more opinionated UI libraries, such as Ant Design's menu, due to its low-level control.","status":"renamed","version":"9.16.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/menu","tags":["javascript","react","react-component","menu","ui","react-menu","typescript"],"install":[{"cmd":"npm install rc-menu","lang":"bash","label":"npm"},{"cmd":"yarn add rc-menu","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-menu","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"Used for animation effects when submenus open or close.","package":"@rc-component/motion","optional":false},{"reason":"Manages overflow behavior within the menu. Note: This dependency migrated from 'rc-overflow' in the newer `@rc-component/menu` package.","package":"@rc-component/overflow","optional":false},{"reason":"Handles advanced triggering mechanisms for dropdowns and submenus.","package":"@rc-component/trigger","optional":false},{"reason":"Collection of utility functions used across rc-components.","package":"@rc-component/util","optional":false},{"reason":"Utility for conditionally joining classNames together.","package":"clsx","optional":false}],"imports":[{"note":"This is the default export for the main Menu component. For CommonJS, named exports like `SubMenu` or `MenuItem` are typically accessed as properties of the default export (e.g., `Menu.SubMenu`).","wrong":"const Menu = require('rc-menu');","symbol":"Menu","correct":"import Menu from 'rc-menu';"},{"note":"SubMenu is a named export. Direct imports from deeply nested paths like `rc-menu/lib/SubMenu` are generally discouraged and can break with bundler optimizations or future refactors.","wrong":"import SubMenu from 'rc-menu/lib/SubMenu';","symbol":"SubMenu","correct":"import { SubMenu } from 'rc-menu';"},{"note":"MenuItem is a named export. While the internal API might refer to `Item`, the public facing export for menu items is `MenuItem`.","wrong":"import { Item } from 'rc-menu';","symbol":"MenuItem","correct":"import { MenuItem } from 'rc-menu';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Menu, { SubMenu, MenuItem } from 'rc-menu';\nimport 'rc-menu/assets/index.css'; // Don't forget to import basic styles if needed\n\nconst App = () => (\n  <div>\n    <h2>Basic rc-menu Example</h2>\n    <Menu style={{ width: 200, border: '1px solid #ddd' }}>\n      <MenuItem key=\"1\">Option 1</MenuItem>\n      <SubMenu key=\"sub1\" title=\"Submenu\">\n        <MenuItem key=\"2-1\">Sub-option 2-1</MenuItem>\n        <MenuItem key=\"2-2\">Sub-option 2-2</MenuItem>\n      </SubMenu>\n      <MenuItem key=\"3\" disabled>Disabled Option 3</MenuItem>\n    </Menu>\n  </div>\n);\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = ReactDOM.createRoot(container);\n  root.render(<App />);\n} else {\n  console.error(\"Root element not found. Please ensure a div with id 'root' exists in your HTML.\");\n}","lang":"typescript","description":"This example demonstrates a basic `rc-menu` setup with a root menu, a submenu, and individual menu items, including a disabled item, rendered into a DOM element. It also includes the necessary CSS import for basic functionality."},"warnings":[{"fix":"Migrate your project to use `@rc-component/menu` by updating your `package.json` and import statements. The API surface is largely compatible, but minor adjustments may be needed. Refer to the `@rc-component/menu` documentation for the latest usage.","message":"The `rc-menu` package has been renamed and its active development has moved to `@rc-component/menu`. While `rc-menu` (v9.16.1) is still available, it is effectively deprecated and will not receive new features or significant updates.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Import `rc-menu/assets/index.css` for basic functionality styling, or provide your own custom CSS/LESS/Sass styles to match your application's design system.","message":"`rc-menu` is a low-level, unstyled component. It provides functionality but no default visual styling. Without importing a CSS file or applying custom styles, the menu will appear as raw HTML elements.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project's `react` and `react-dom` versions meet the peer dependency requirements (`>=16.9.0` for `rc-menu@9.16.1`). Upgrade React if necessary.","message":"Incorrect React peer dependency versions can lead to runtime errors or unexpected behavior. `rc-menu` requires specific React versions.","severity":"gotcha","affected_versions":"<9.0.0"},{"fix":"Ensure all `rc-*` dependencies are updated to their `@rc-component/*` counterparts if you're using them directly. It's best practice to only import from the main `@rc-component/menu` package unless absolutely necessary.","message":"When migrating from `rc-menu` to `@rc-component/menu`, internal dependencies like `rc-overflow` have also been renamed to `@rc-component/overflow`. Direct imports or assumptions about these sub-packages might break.","severity":"gotcha","affected_versions":">=1.0.0 (for @rc-component/menu)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"If using CommonJS, explicitly destructure the exports or access them as properties of the default export, e.g., `const { SubMenu, MenuItem } = require('rc-menu');` or `const Menu = require('rc-menu'); const SubMenu = Menu.SubMenu;`.","cause":"Attempting to access named exports like `SubMenu` or `MenuItem` as properties of a CommonJS `require` call without proper interop handling.","error":"TypeError: Cannot read properties of undefined (reading 'SubMenu')"},{"fix":"Check your `node_modules` for duplicate React installations. Ensure that `react` and `react-dom` peer dependencies are correctly installed and that only one version of React is bundled. Use `npm ls react` or `yarn why react` to diagnose.","cause":"This error often indicates a mismatch in React versions or multiple instances of React being loaded, common in complex monorepos or when peer dependencies are not correctly resolved.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Add `import 'rc-menu/assets/index.css';` to your entry point or main component. Ensure your bundler (e.g., Webpack, Vite) has appropriate loaders (like `css-loader` and `style-loader`) configured to process CSS files.","cause":"The main stylesheet for `rc-menu` is not found, typically because it wasn't explicitly imported or your build system isn't configured to handle CSS imports.","error":"Module not found: Error: Can't resolve 'rc-menu/assets/index.css'"}],"ecosystem":"npm"}