Open In App

React Suite Dropdown Submenu

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The dropdown component allows the user to provide navigation that uses a select picker if you want to select a value. The dropdown submenu is used to create a nested menu. Meaning menu inside a menu.

Syntax:

<Dropdown title="GeeksforGeeks">
    <Dropdown.Item>Item 1</Dropdown.Item>
    <Dropdown.Menu title="SubMenu">
        <Dropdown.Item>Item 2A</Dropdown.Item>
        <Dropdown.Item>Item 2B</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

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 rsuite

Project Structure: It will look like the following.

 

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

In this example, we will create a dropdown menu and create another  menu as a dropdown item

JavaScript




import React from 'react';
import Dropdown from 'rsuite/Dropdown';
import 'rsuite/dist/rsuite.min.css';
  
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks</h1>
            <h3>React Suite Dropdown Submenu</h3>
            <Dropdown title="GeeksforGeeks">
                <Dropdown.Item>Item 1</Dropdown.Item>
                <Dropdown.Menu title="Item 2">
                    <Dropdown.Item>Item 2A</Dropdown.Item>
                    <Dropdown.Item>Item 2B</Dropdown.Item>
                </Dropdown.Menu>
                <Dropdown.Item>Item 3</Dropdown.Item>
                <Dropdown.Menu title="Item 4">
                    <Dropdown.Menu title="Item 4A">
                        <Dropdown.Item>Item 4A-A</Dropdown.Item>
                        <Dropdown.Item>Item 4A-B</Dropdown.Item>
                    </Dropdown.Menu>
                    <Dropdown.Item>Item 4B</Dropdown.Item>
                </Dropdown.Menu>
  
            </Dropdown>
        </div>
    )
}
  
export default App;


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:

 

Example 2: In this example, we will learn, how can we disable some Menu items/ entire sub-menu.

JavaScript




import React from 'react';
import Dropdown from 'rsuite/Dropdown';
import 'rsuite/dist/rsuite.min.css';
  
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks</h1>
            <h3>React Suite Dropdown Submenu</h3>
            <Dropdown title="GeeksforGeeks">
                <Dropdown.Item>Database</Dropdown.Item>
                <Dropdown.Menu title="DSA">
                    <Dropdown.Item disabled>C++</Dropdown.Item>
                    <Dropdown.Item>Java</Dropdown.Item>
                </Dropdown.Menu>
                <Dropdown.Item >Blockchain Technology</Dropdown.Item>
                <Dropdown.Menu title="Web Technology">
                    <Dropdown.Menu title="React" disabled>
                        <Dropdown.Item >Material UI</Dropdown.Item>
                        <Dropdown.Item>React Suite</Dropdown.Item>
                    </Dropdown.Menu>
                    <Dropdown.Item>HTML</Dropdown.Item>
                </Dropdown.Menu>
  
            </Dropdown>
        </div>
    )
}
  
export default App;


Output:

 

References: https://rsuitejs.com/components/dropdown/#submenu



Last Updated : 17 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads