React-Bootstrap Dropdowns Drop directions

The React bootstrap provides us with the bootstrap components out of the box compared to normal React, It comes with the pre-applied CSS and the themes and properties of the bootstrap component can be modified by changing the properties. The Dropdown component is used for showing dropdowns in React Bootstrap. The dropdowns contain a list of hyperlinks that can be used for navigating to different parts of the page or different pages on the sidebars or top nav bars.

In this article, we will see React Boostrap dropdowns drop direction. The drop-down drop directions may come into the picture when the UI needs to be enhanced to avoid overlapping dropdowns. Even in the case of nested dropdowns, the drop directions can be given to specify in which direction the nested dropdown should be shown. The direction property can be used in dropdown components like <DropdownButton> and <SplitDropdown>.

Property used:

• drop: This property is used to change the directions of the dropdown in react bootstrap.

Syntax:

 <DropdownButton drop="direction"  title="title">
      <Dropdown.Item>......</Dropdown.Item>
 </DropdownButton>

Dropdown directions values:

• “up”: The dropdown will appear in upper direction.
• “up-centered” : The dropdown will be in up centered direction.
• “down”: The dropdown will appear in down direction.
• “down-centered”: The dropdown will be in down centered direction.
• “start”: The dropdown will be shown at the beggining of the button.
• “end”: The dropdown will be shown at the ending of the button.

Steps to create a React App and Install required modules:

Step 1: Create a react application by running the given command:

npx create-react-app AppName

Step 2: Once it is done change your directory to the newly created application using the following command:

cd AppName

Step 3: Install React Bootstrap dependency:

npm install react-bootstrap bootstrap

Step 4 : Or Add these cdn links in the index.html:

<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
    <script
      src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
      crossorigin>
</script>
<script
      src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin>
</script>

Step 5: Start the application

npm start

Project Structure:

Example 1: In this example, we are using the “drop” property to add different directions in DropdownButton component in App.js file.

Javascript

import DropdownButton from "react-bootstrap/DropdownButton";
import Dropdown from "react-bootstrap/Dropdown";

const App = () => {
    return (
        <div className="App">
            <h1 style={{ color: "green", textAlign: "center" }}>
                {" "}
                GeeksforGeeks
            </h1>
            <h5 style={{ textAlign: "center" }}>
                {" "}
                React-Bootstrap Dropdowns Drop directions
            </h5>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>

            <div style={{ textAlign: "center" }}>
                <DropdownButton
                    drop="up"
                    variant="dark"
                    title="Learn Programming (up)"
                    className=" my-2"
                >
                    <Dropdown.Item>C</Dropdown.Item>
                    <Dropdown.Item>C++</Dropdown.Item>
                    <Dropdown.Item>Java</Dropdown.Item>
                    <Dropdown.Item>C#</Dropdown.Item>
                    <Dropdown.Item>Javascript</Dropdown.Item>
                    <Dropdown.Item>Python</Dropdown.Item>
                </DropdownButton>
                <DropdownButton
                    drop="down"
                    variant="dark"
                    title="Learn Programming (down)"
                    className=" my-2"
                >
                    <Dropdown.Item>C</Dropdown.Item>
                    <Dropdown.Item>C++</Dropdown.Item>
                    <Dropdown.Item>Java</Dropdown.Item>
                    <Dropdown.Item>C#</Dropdown.Item>
                    <Dropdown.Item>Javascript</Dropdown.Item>
                    <Dropdown.Item>Python</Dropdown.Item>
                </DropdownButton>
                <DropdownButton
                    drop="start"
                    variant="dark"
                    title="Learn Programming (start)"
                    className=" my-2"
                >
                    <Dropdown.Item>C</Dropdown.Item>
                    <Dropdown.Item>C++</Dropdown.Item>
                    <Dropdown.Item>Java</Dropdown.Item>
                    <Dropdown.Item>C#</Dropdown.Item>
                    <Dropdown.Item>Javascript</Dropdown.Item>
                    <Dropdown.Item>Python</Dropdown.Item>
                </DropdownButton>
                <DropdownButton
                    drop="end"
                    variant="dark"
                    title="Learn Programming (end)"
                    className=" my-2"
                >
                    <Dropdown.Item>C</Dropdown.Item>
                    <Dropdown.Item>C++</Dropdown.Item>
                    <Dropdown.Item>Java</Dropdown.Item>
                    <Dropdown.Item>C#</Dropdown.Item>
                    <Dropdown.Item>Javascript</Dropdown.Item>
                    <Dropdown.Item>Python</Dropdown.Item>
                </DropdownButton>
            </div>
        </div>
    );
};

export default App;

Output:

Example 2: In this example, we are using the “drop” property to add different directions in a SplitButton component.

Javascript

import SplitButton from "react-bootstrap/SplitButton";
import Dropdown from "react-bootstrap/Dropdown";
const App = () => {
    return (
        <div className="App">
            <h1 style={{ color: "green", textAlign: "center" }}>
                {" "}
                GeeksforGeeks
            </h1>
            <h5 style={{ textAlign: "center" }}>
                {" "}
                React-Bootstrap Dropdowns Drop directions
            </h5>
            <br></br>
            <div style={{ textAlign: "center" }}>
                <SplitButton variant="success" title="Explore">
                    <Dropdown.Item>Courses</Dropdown.Item>
                    <Dropdown.Item>Practice</Dropdown.Item>
                    <Dropdown.Item>Offers</Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown drop="end">
                        <Dropdown.Toggle variant="primary">
                            Coding Languages
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                            <Dropdown.Item>C++</Dropdown.Item>
                            <Dropdown.Item>Java</Dropdown.Item>
                            <Dropdown.Item>Python</Dropdown.Item>
                            <Dropdown.Item>C#</Dropdown.Item>
                            <Dropdown.Item>JavaScript</Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                </SplitButton>
            </div>
        </div>
    );
};

export default App;

Output :