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.
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/