React-Bootstrap Dropdown Component

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.

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: