React-Bootstrap Dropdown Component

04 May, 2021
React-Bootstrap is a front-end framework that was designed keeping react in mind. Dropdown Component provides a way to displaying lists of links or more actions within a menu when clicked over it. We can use the following approach in ReactJS to use the react-bootstrap Dropdown Component.
Dropdown Props:
alignRight: It is used to align the menu to the right side of the Dropdown toggle.
as: It can be used as a custom element type for this component.
drop: It is used to determine the location and direction of the Menu in relation to its toggle.
flip: It is used to flip the dropdown in case of overlapping on the reference element.
focusFirstItemOnShow: When the dropdown is opened, it is used to control the focus behavior for it.
navbar: It is the attribute that is by default false and indicates whether dropdown is navbar related or not.
onSelect: It is a callback function that is triggered when a menu item is selected.
onToggle: It is used to trigger a callback when the visibility of the dropdown needs to be changed.
show: It is used to indicate whether the dropdown is visible or not.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
SplitButton Props:
disabled: It is used to disable the button.
href: It is used to pass the href attribute to the underlying non-toggle button.
id: It is the general HTML id attribute for the toggle button.
menuAlign: It is used to responsively align the dropdown menu.
menuRole: It is used for the ARIA accessible role applied which is applied to the menu component.
onClick: It is the callback function that is passed as a handler for the non-toggle button.
renderMenuOnMount: It is used to indicate whether to render the dropdown menu before the first time it is shown in the DOM.
rootCloseEvent: It is used to close the component when which event is triggered outside this component.
size: It denotes the size of the component.
target: For the non-toggle Button, it is an anchor target passed to it.
title: It is used to define the content of non-toggle Button.
toggleLabel: For the toggle button, it is the accessible label.
type: It is used to pass the type for the non-toggle button.
variant: It is used to indicate the style variant for it.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Dropdown.Toggle Props:
as: It can be used as a custom element type for this component.
childBsPrefix: It is used for the DropdownButton to pass through to the underlying button or whatever from it.
eventKey: It is used to uniquely identify the dropdown toggle component.
id: It is used to pass the HTML id attribute to this element.
split: It is used to pass the split attribute to this element.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Dropdown.Menu Props:
align: It is used for the dropdown menu to align it to the specified side of the container.
alignRight: It is used for the dropdown menu to align it to the right side of the container.
as: It can be used as a custom element type for this component.
flip: It is used to flip the dropdown to its opposite placement.
onSelect: It is a callback function that is triggered when the menu item is selected.
popperConfig: It is used to pass the set of popper options to the popper directly.
renderOnMount: It is used to indicate whether to render the dropdown menu before the first time it is shown in the DOM.
rootCloseEvent: It is used to close the component when which event is triggered outside this component.
show: It is used to indicate whether the dropdown menu is visible or not.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Dropdown.Item Props:
active: It can be used to mark the menu item as active.
as: It can be used as a custom element type for this component.
disabled: It is used to make the menu item disabled.
eventKey: It is used to uniquely identify the selected menu item.
href: It is used to pass the href attribute to this element.
onClick: It is a callback function that is triggered when the menu item is clicked.
onSelect: It is a callback function that is triggered when the menu item is selected.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Dropdown.Header Props:
as: It can be used as a custom element type for this component.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Dropdown.Divider Props:
as: It can be used as a custom element type for this component.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
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 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 react-bootstrap 
npm install bootstrap
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap 
npm install bootstrap
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react';import 'bootstrap/dist/css/bootstrap.css';import Dropdown from 'react-bootstrap/Dropdown';  export default function App() {  return (    <div style={{ display: 'block',                   width: 700,                   padding: 30 }}>      <h4>React-Bootstrap Dropdown Component</h4>      <Dropdown>        <Dropdown.Toggle variant="success">          Open Menu        </Dropdown.Toggle>        <Dropdown.Menu>          <Dropdown.Item href="#">            Home Page          </Dropdown.Item>          <Dropdown.Item href="#">            Settings          </Dropdown.Item>          <Dropdown.Item href="#">            Logout          </Dropdown.Item>        </Dropdown.Menu>      </Dropdown>    </div>  );}
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:
Reference: https://react-bootstrap.github.io/components/dropdowns/
React-Bootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.