Open In App

ReactJS UI Ant Design Menu Component

Last Updated : 16 Jun, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Menu Component is used to display a versatile menu for navigation purposes. We can use the following approach in ReactJS to use the Ant Design Menu Component.

Menu Props:

  • defaultOpenKeys: It is used to denote the array with the keys of the default opened sub-menus.
  • defaultSelectedKeys: It is used to denote the array with the keys of default selected menu items.
  • expandIcon: It is used to pass the custom expand icon of the submenu.
  • forceSubMenuRender: It is used to force the render submenu into DOM before it becomes visible.
  • inlineCollapsed: It is used to specify the collapsed status when the menu is in an inline mode.
  • inlineIndent: It is used to denote the indent of inline menu items on each level in pixels.
  • mode: It is used to denote the type of menu.
  • multiple: It is used to allow the selection of multiple items.
  • openKeys: It is used to denote the array with the keys of the currently opened sub-menus.
  • overflowedIndicator: It is used to pass the customized icon when the menu is collapsed.
  • selectable: It is used to allow selecting menu items.
  • selectedKeys: It is used to denote the array with the keys of currently selected menu items.
  • style: It is used to define the style of the root node.
  • subMenuCloseDelay: It denotes the delay time in seconds to hide the submenu when the mouse leaves.
  • subMenuOpenDelay: It denotes the delay time in seconds to show the submenu when the mouse enters.
  • theme: It is used to define the color theme of the menu.
  • triggerSubMenuAction: It is a callback function that can trigger submenu open/close.
  • onClick: It is a callback function that is called when a menu item is clicked.
  • onDeselect: It is a callback function that is called when a menu item is deselected.
  • onOpenChange: It is a callback function that is called when sub-menus are opened or closed.
  • onSelect: It is a callback function that is called when a menu item is selected.

Menu.Item Props:

  • danger: It is used to display the danger style.
  • disabled: It is used to indicate whether the menu item is disabled or not.
  • icon: It is used to pass the icon of the menu item.
  • key: It is used to denote the unique ID of the menu item.
  • title: It is used to set the display title for the collapsed item.

Menu.SubMenu Props:

  • children: It is used to denote the sub-menus or sub-menu items.
  • disabled: It is used to indicate whether the sub-menu is disabled or not.
  • icon: It is used to pass the icon of the sub-menu.
  • key: It is used to denote the unique ID of the sub-menu.
  • popupClassName: It is used to denote the sub-menu class name.
  • popupOffset: It is used to denote the sub-menu offset.
  • title: It is used to denote the title of the sub-menu.
  • onTitleClick: It is a callback function that is triggered when the sub-menu title is clicked.

Menu.ItemGroup Props:

  • children: It is used to denote the Sub-menu items.
  • title: It is used to denote the title of the group.

Menu.Divider: It is used as a divider line in between menu items. This component is only used in vertical popup Menu or Dropdown Menu.

Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command:
    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:
    cd foldername
  • Step 3: After creating the ReactJS application, Install the required module using the following command:
    npm install antd

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js
import React, { useState } from 'react';
import "antd/dist/antd.css";
import { Menu } from 'antd';

const { SubMenu } = Menu;

export default function App() {
  const [selectedComponent, setSelectedComponent] = useState(''); // State to manage the selected component

  const handleMenuClick = (e) => {
    setSelectedComponent(e.key); // Update the component based on the clicked menu item
  };

  const renderComponent = () => {
    switch (selectedComponent) {
      case '1':
        return <div>Component for Option 1</div>;
      case '2':
        return <div>Component for Option 2</div>;
      case '3':
        return <div>Component for Option 3</div>;
      case '4':
        return <div>Component for Option 4</div>;
      default:
        return <div>Please select an option from the menu.</div>;
    }
  };

  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design Menu Component</h4>
      <Menu
        onClick={handleMenuClick}  // Attach the menu click handler
        defaultSelectedKeys={['1']}
        style={{ width: 300 }}
        mode="inline"
      >
        <SubMenu key="1" title="Settings">
          <Menu.Item key="2">Option 1</Menu.Item>
          <Menu.Item key="3">Option 2</Menu.Item>
          <SubMenu key="4" title="Sub-Menu">
            <Menu.Item key="5">Option 3</Menu.Item>
            <Menu.Item key="6">Option 4</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu key="7" title="Profile">
          <Menu.Item key="8">Option 5</Menu.Item>
          <Menu.Item key="9">Option 6</Menu.Item>
          <Menu.Item key="10">Option 7</Menu.Item>
          <Menu.Item key="11">Option 8</Menu.Item>
        </SubMenu>
      </Menu>

      {/* Dynamic component rendering based on selected menu item */}
      <div style={{ marginTop: 20 }}>
        {renderComponent()}
      </div>
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://ant.design/components/menu/


Next Article

Similar Reads