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: