Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

React-Bootstrap Dropdown Component

  • Last Updated : 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 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:

Reference: https://react-bootstrap.github.io/components/dropdowns/




My Personal Notes arrow_drop_up
Recommended Articles
Page :