React Suite Dropdown Submenu

Last Updated : 17 Jun, 2022

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

React Suite Dropdown Used with next/link

nikitamehrotra99

Improve

Article Tags :

React Suite Dropdown Submenu

Similar Reads

Thank You!

What kind of Experience do you want to share?