React Suite Dropdown Placement

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite dropdown placement. The dropdowns can be placed in 8 positions i.e, topStart, topEnd, leftStart, leftEnd, bottomStart, bottomEnd, rightStart, and rightEnd.

Syntax:

// Import Statement
import { Dropdown } from "rsuite/";

// App.Js File
Function App() {
    return (
        <Dropdown placement="topStart">
            <Dropdown.Item key={1}>...</Dropdown.Item>
        </Dropdown>
    );
}

Dropdown Props:

• activeKey: This is used to set the option to activate the state which corresponds to the event key in the Dropdown.item component.
• classPrefix: This is used to denote the prefix of the component CSS class.
• disabled: This is used to indicate whether the component is disabled or not.
• icon: This is used to set the icon.
• menuStyle: This is used to change the style of the menu.
• onClose: This is a menu close callback function.
• onOpen: This is a menu open callback function.
• onSelect: This is a selected callback function.
• onToggle: This is a Callback function for menu state switching.
• open: This tells whether the dropdown is open.
• placement: This is used for the placement of the Menu.
• renderToggle: This is used to denote the custom title
• title: The menu defaults to display content.
• toggleAs: This helps in using a custom element for this component.
• toggleClassName: This is used to apply CSS to the Toggle DOM node
• trigger: This is used for the Triggering events.

Dropdown.Item Props:

• active: This is used to activate the current option.
• as: This helps in using a custom element type for this component.
• classPrefix: This is used to denote the prefix of the component CSS class.
• disabled: This is used to disable the current option.
• divider: This is used to display the divider.
• eventKey: This is used to denote the value of the current option.
• icon: This is used to set the icon.
• onSelect: This selects a callback function for the current option.
• panel: This is used to display a custom panel.

Dropdown.Menu Props:

• icon: This is used to set the icon.
• title: This is used to define the title as a submenu.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the dropdown topEnd, topStart, bottomStart, bottomEnd placement.

Javascript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Dropdown } from "rsuite/";

const DropItems = [
    <Dropdown.Item key={1}>Tutorials</Dropdown.Item>,
    <Dropdown.Item key={2}>Practice</Dropdown.Item>,
    <Dropdown.Item key={3}>Jobs</Dropdown.Item>,
];

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown Placement</h4>

                <div style={{ marginTop: 50, padding: 30,
                backgroundColor: 'green', width: 600 }}>
                    <Dropdown title="topStart" placement="topStart"
                              style={{ marginRight: 10 }}>
                        {DropItems}
                    </Dropdown>
                    <Dropdown title="topEnd" placement="topEnd"
                              style={{ marginRight: 10 }}>
                        {DropItems}
                    </Dropdown>
                    <Dropdown title="bottomStart" placement="bottomStart"
                              style={{ marginRight: 10 }}>
                        {DropItems}
                    </Dropdown>
                    <Dropdown title="bottomEnd" placement="bottomEnd"
                              style={{ marginRight: 10 }}>
                        {DropItems}
                    </Dropdown>
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates the hoverable dropdown leftEnd, leftStart, rightStart, rightEnd placement.

Javascript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Dropdown } from "rsuite/";

const DropItems = [
    <Dropdown.Item key={1}>Tutorials</Dropdown.Item>,
    <Dropdown.Item key={2}>Practice</Dropdown.Item>,
    <Dropdown.Item key={3}>Jobs</Dropdown.Item>,
];

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown Placement</h4>

                <div style={{ marginTop: 50, padding: 30,
                              backgroundColor: 'lightblue', width: 1000 }}>

                    <Dropdown title="leftStart hover" trigger="hover"
                              placement="leftStart"
                              style={{ marginRight: 10 }}>
                        {DropItems}
                    </Dropdown>
                    <Dropdown title="leftEnd hover" trigger="hover"
                              placement="leftEnd"
                              style={{ marginRight: 10 }}>
                        {DropItems}
                    </Dropdown>
                    <Dropdown title="rightStart hover" trigger="hover"
                              placement="rightStart"
                              style={{ marginRight: 10 }}>
                        {DropItems}
                    </Dropdown>
                    <Dropdown title="rightEnd hover" trigger="hover"
                              placement="rightEnd">
                        {DropItems}
                    </Dropdown>
                </div>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/dropdown/#placement