React-Bootstrap Dropdown Component

Last Updated : 26 Jul, 2024

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 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

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.

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>
  );
}