Skip to content
Related Articles

Related Articles

React Suite Dropdown Placement

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!