How to Make Scrollable Drop Down Lists in React-Bootstrap ?

In this article, we will learn how to make Scrollable Dropdown lists in React-Bootstrap. Drop-down lists allow users to choose an option from a list of available options visible whenever the corresponding component is clicked or triggered. Using React-bootstrap, we can customize the drop-down list as needed.

Syntax:

<Dropdown>
    <Dropdown.Toggle>...</Dropdown.Toggle>
    <Dropdown.Menu> 
        <Dropdown.Item>
        <Dropdown.Item>
        </Dropdown.Item>
    </Dropdown.menu>
</Dropdown>

Steps to create the application:

Step 1: Create the react app using the following CRA command.

npx create-react-app appdemo

Step 2: Now, navigate to your current project i.e. appdemo using the following command.

cd appdemo

Step 3: Install the required modules i.e. react-bootstrap and bootstrap using the following command

npm install react-bootstrap bootstrap

Step 4: Import the necessary components from react-bootstrap as per requirement. To demonstrate a scrollable dropdown list. I am importing Bootstrap CSS and Dropdown components from react-bootstrap.

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";

Project Structure:

The project structure look like the following

package.json:

 {
    "name": "appdemo",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.3.2",
        "react": "^18.2.0",
        "react-bootstrap": "^2.8.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    },
}

Approach

We will use react-bootstrap dropdown component to create the scrollable dropdown list as shown below.

Example: Let us create a dropdown list component using React-bootstrap

// App.js
import React from 'react';
import ScrollableDropdown from './ScrollableDropdown';
import './App.css'; 
const App = () => {
  return (
    <div class="component">
      <ScrollableDropdown />
    </div>
  );
};
export default App;

// ScrollableDropdown.jsx
import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "./ScrollableDropdown.css";
const ScrollableDropdown = () => {
    return (
        <Dropdown>
            <h4 class="subtitle">
                What is your specialization?
            </h4>
            <Dropdown.Toggle
                variant="success"
                id="dropdown-basic"
            >
                select from here
            </Dropdown.Toggle>

            <Dropdown.Menu
                style={{
                    maxHeight: "200px",
                    overflowY: "auto",
                }}>
                
                <Dropdown.Item href="#">CSE</Dropdown.Item>
                <Dropdown.Item href="#">IT</Dropdown.Item>
                <Dropdown.Item href="#">
                    AI & DS
                </Dropdown.Item>
                <Dropdown.Item href="#">
                    AI & ML
                </Dropdown.Item>
                <Dropdown.Item href="#">EEE</Dropdown.Item>
                <Dropdown.Item href="#">ECE</Dropdown.Item>
                <Dropdown.Item href="#">
                    CIVIL
                </Dropdown.Item>
                <Dropdown.Item href="#">MECH</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
};

export default ScrollableDropdown;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

/*  ScrollableDropdown.css*/
.subtitle{
    margin-bottom:30px
}

/* App.css */
.component {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Explanation: In the above code, we created a functional component called ScrollableDropdown in which we are using the Dropdown component which is imported from React-bootstrap.

The Dropdown component comprises of various other components as follows:

• Dropdown.Toggle: This is used to trigger the element for dropdown containing the text "select from here".
• Dropdowm.Menu: This is used to display the dropdown menu and styled to make the dropdown menu scrollable with

• Dropdown.Item: This is included in the Dropdown.Menu and used to represent the individual options/choices in the dropdown list to choose.
• We can add more customization to our component using CSS.

Steps to run the application:

To start the application. use the commands:

npm start

Output: