ReactJS UI Ant Design Menu Component - GeeksforGeeks

01 Jun, 2021
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 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 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
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 from 'react';import "antd/dist/antd.css";import { Menu } from 'antd';  const { SubMenu } = Menu;  export default function App() {    return (    <div style={{      display: 'block', width: 700, padding: 30    }}>      <h4>ReactJS Ant-Design Menu Component</h4>      <Menu        defaultOpenKeys={['1']}        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>    </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/
ReactJS-Ant Design
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
Create a Responsive Navbar using ReactJS
How to pass data from one component to other component in ReactJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?