or run

npx @tessl/cli init
Log in

Version

Files

docs

index.mdlayout-components.mdmenu-container.mdmenu-items.mdsubmenu-system.md
tile.json

tessl/npm-rc-menu

React menu UI component library providing comprehensive menu components for interactive navigation systems

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rc-menu@9.16.x

To install, run

npx @tessl/cli install tessl/npm-rc-menu@9.16.0

index.mddocs/

RC Menu

RC Menu is a comprehensive React menu component library that provides a full set of UI components for creating interactive menus in React applications. It offers Menu, SubMenu, MenuItem, Divider, and ItemGroup components with extensive customization options including multiple selection modes, keyboard navigation support, animation effects, and flexible styling.

Package Information

  • Package Name: rc-menu
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install rc-menu

Core Imports

import Menu, { SubMenu, MenuItem, MenuItemGroup, Divider } from "rc-menu";

Alternative named imports:

import Menu, { SubMenu, Item, ItemGroup, Divider } from "rc-menu";

For CommonJS:

const Menu = require("rc-menu");
const { SubMenu, MenuItem, MenuItemGroup, Divider } = Menu;

For type definitions:

import type { MenuProps, MenuItemProps, SubMenuProps, MenuItemGroupProps, MenuRef } from "rc-menu";

Basic Usage

Modern items API (Recommended):

import Menu from "rc-menu";

function App() {
  const handleClick = (info) => {
    console.log('Clicked:', info.key);
  };

  const handleSelect = (info) => {
    console.log('Selected:', info.selectedKeys);
  };

  const items = [
    {
      key: '1',
      label: 'Navigation One',
    },
    {
      key: '2',
      label: 'Navigation Two',
    },
    {
      key: 'sub1',
      label: 'Navigation Three - SubMenu',
      children: [
        { key: '3', label: 'Option 1' },
        { key: '4', label: 'Option 2' },
      ],
    },
    { type: 'divider' },
    {
      key: '5',
      label: 'Navigation Four',
    },
  ];

  return (
    <Menu
      mode="vertical"
      items={items}
      defaultSelectedKeys={['1']}
      onClick={handleClick}
      onSelect={handleSelect}
    />
  );
}

Legacy children API (Deprecated):

import Menu, { SubMenu, MenuItem, Divider } from "rc-menu";

function App() {
  const handleClick = (info) => {
    console.log('Clicked:', info.key);
  };

  const handleSelect = (info) => {
    console.log('Selected:', info.selectedKeys);
  };

  return (
    <Menu
      mode="vertical"
      defaultSelectedKeys={['1']}
      onClick={handleClick}
      onSelect={handleSelect}
    >
      <MenuItem key="1">Navigation One</MenuItem>
      <MenuItem key="2">Navigation Two</MenuItem>
      <SubMenu key="sub1" title="Navigation Three - SubMenu">
        <MenuItem key="3">Option 1</MenuItem>
        <MenuItem key="4">Option 2</MenuItem>
      </SubMenu>
      <Divider />
      <MenuItem key="5">Navigation Four</MenuItem>
    </Menu>
  );
}

Architecture

RC Menu is built around several key components and systems:

  • Menu Container: Main component managing state, keyboard navigation, and child component coordination
  • Menu Items: Individual interactive elements (MenuItem) with event handling and styling support
  • SubMenu System: Nested menu support with popup/inline modes and configurable triggers
  • Selection Management: Single/multiple selection with controlled and uncontrolled modes
  • Animation System: Configurable animations for expand/collapse and popup behaviors
  • Keyboard Navigation: Full accessibility support with arrow key navigation and Enter/Space activation
  • Event System: Comprehensive click, select, hover, and open/close event handling

Capabilities

Menu Container

Core menu container component with comprehensive configuration options for layout, selection, animation, and event handling.

interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
  // Basic Configuration
  prefixCls?: string;
  rootClassName?: string;
  items?: any[]; // Array of item objects with key, label, children properties
  /** @deprecated Please use `items` instead */
  children?: React.ReactNode;
  disabled?: boolean;
  direction?: 'ltr' | 'rtl';
  
  // Mode
  mode?: 'horizontal' | 'vertical' | 'inline';
  inlineCollapsed?: boolean;
  disabledOverflow?: boolean;
  
  // Active State
  activeKey?: string;
  defaultActiveFirst?: boolean;
  
  // Selection
  selectable?: boolean;
  multiple?: boolean;
  defaultSelectedKeys?: string[];
  selectedKeys?: string[];
  
  // Open/Close Control
  defaultOpenKeys?: string[];
  openKeys?: string[];
  
  // Events
  onClick?: (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onSelect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onDeselect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onOpenChange?: (openKeys: string[]) => void;
  
  // Level & Layout
  inlineIndent?: number;
  
  // Motion
  motion?: any; // Animation configuration object
  defaultMotions?: any; // Default animation configurations for different modes
  
  // Popup
  subMenuOpenDelay?: number;
  subMenuCloseDelay?: number;
  forceSubMenuRender?: boolean;
  triggerSubMenuAction?: 'click' | 'hover';
  builtinPlacements?: Record<string, any>;
  
  // Icon
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  overflowedIndicator?: React.ReactNode;
  overflowedIndicatorPopupClassName?: string;
  
  // Function
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
}

interface MenuRef {
  focus: (options?: FocusOptions) => void;
  list: HTMLUListElement;
}

Menu Container

Menu Items

Individual menu item components with support for icons, disabled states, and event handling.

interface MenuItemProps {
  children?: React.ReactNode;
  disabled?: boolean;
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  extra?: React.ReactNode;
  onMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
  onMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
}

Menu Items

SubMenu System

Nested menu support with popup and inline modes, configurable triggers, and animation options.

interface SubMenuProps {
  title?: React.ReactNode;
  children?: React.ReactNode;
  disabled?: boolean;
  popupClassName?: string;
  popupStyle?: React.CSSProperties;
  popupOffset?: number[];
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  overflowedIndicator?: React.ReactNode;
  onTitleClick?: (info: { key: string; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onTitleMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
  onTitleMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
}

SubMenu System

Layout Components

Utility components for organizing menu structure including groups and dividers.

interface MenuItemGroupProps {
  title?: React.ReactNode;
  children?: React.ReactNode;
}

interface DividerProps {
  className?: string;
  style?: React.CSSProperties;
}

Layout Components