React-Bootstrap Dropdowns Customization

React-Bootstrap Dropdowns Customization is used to make dropdown menus in React apps look and behave just the way you want. It lets you change their appearance, colors, and how they open and close, so they fit perfectly with your project’s style and functionality.

Custom dropdown component:

• You can define custom components and pass them as the “as” prop to have complete authority over how each component functions.
• Ensure that your custom toggle and menu components are designed to work with refs to maintain proper functionality within the React Bootstrap framework.

Syntax:

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

Example 1: Let us see an example of a basic react-bootstrap dropdown.

Javascript

/* DropDownBasic.jsx */

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "./DropDownBasic.css";

const DropDownBasic = () => {
    return (
        <Dropdown className="component">
            <Dropdown.Toggle>
                Select an option
            </Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item href="#">
                    Option-1</Dropdown.Item>
                <Dropdown.Item href="#">
                    Option-2</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
};

export default DropDownBasic;

Javascript

//App.js

import React from 'react';
import DropDownBasic from './DropDownBasic';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
    return (
        <div>
            <DropDownBasic />
        </div>
    );
};
export default App;

CSS

/* DropDownBasic.css */

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

Output:

Example 2: Let us see an example of applying custom content in react-bootstrap.

Javascript

/* DropDownCustom.js */

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "./DropDownCustom.css";
import { Button } from "react-bootstrap";

const DropDownCustom = () => {
    return (
        <Dropdown className="component">
            <Dropdown.Toggle variant="success">
                Select an option
            </Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item href="#" className="icon">
                    1. <i className="fas fa-home" />
                </Dropdown.Item>
                <Dropdown.Item href="#">
                    2. <Button variant="info">
                            component
                        </Button>
                </Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
};

export default DropDownCustom;

Javascript

//App.js

import React from 'react';
import DropDownCustom from './DropDownCustom';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
    return (
        <div>
            <DropDownCustom />
        </div>
    );
};
export default App;

CSS

/* DropDownCustom.css */

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

Output: