How to Add a Image to React Bootstrap dropdown ?

In this article, we will see how to add an image to the React Bootstrap dropdown. It is a React-based implementation of the Bootstrap components. Dropdown Component provides a way to display lists of links or more actions within a menu when clicked over it.

Steps to Create React Application and Installing Modules:

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:

Approach:

To add an image to the react-bootstrap dropdown we will need the “Dropdown” component of react-bootstrap. Inside the Dropdown component, we will use <img> to insert an image in the dropdown.

Example 1: In this example, we are creating a navbar with the help of Nav and Navbar component of react-bootstrap. To create a dropdown NavDropdown component has been used.

Javascript

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { FaCog } from 'react-icons/fa';
import './App.css'

function App() {
    return (
        <>
            <style>
                {`
                    body {
                    background-color: aliceblue;
                    }`
                }
            </style>
            <Navbar bg="warning">
                <Container >
                    <Nav>
                        <Navbar.Brand className='me-5'
                            href="#home">
                            HOME
                        </Navbar.Brand>
                        <Navbar.Brand className='me-5'
                            href="#features">
                            FEATURES
                        </Navbar.Brand>
                        <Navbar.Brand className='me-5'
                            href="#pricing">
                            PRICING
                        </Navbar.Brand>
                        <NavDropdown title='MENU'
                            id="collapsible-nav-dropdown" >
                            <NavDropdown.Item href="#action/3.1">
                                <img
                                    src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                                    width="30"
                                    className="d-inline-block align-top"
                                    alt="React Bootstrap logo" />
                                GEEKSFORGEEKS
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">
                                <FaCog size={24} />
                                SETTINGS
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">
                                LOGIN
                            </NavDropdown.Item>
                            <NavDropdown.Divider />
                        </NavDropdown>
                    </Nav>
                </Container>
            </Navbar>
            <h4 style={{
                textAlign: 'center',
                position: 'relative',
                marginTop: '20%'
            }}>
                Add image to React-bootstrap
                Dropdown Component
            </h4>
        </>
    );
}

export default App;

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:

Output

Example 2: In this example we will be using “Image” component to add image in the dropdown. We will create a function which will have the image component and its attributes like src, width etc. This function can be called wherever we need the image.

Javascript

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { FaCog } from 'react-icons/fa';
import './App.css';

function App() {
    const user = (
        <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
            width="30"
            alt="React Bootstrap logo" />
    )
    const icon = (
        <FaCog size={24} />
    )
    return (
        <>
            <style>
                {`
                    body {
                    background-color: aliceblue;
                    }`
                }
            </style>
            <Navbar className="bg-warning">
                <Container>
                    <Nav>
                        <Navbar.Brand
                            className='me-5' href="#home">
                            HOME
                        </Navbar.Brand>
                        <Navbar.Brand
                            className='me-5' href="#features">
                            FEATURES
                        </Navbar.Brand>
                        <Navbar.Brand className='me-5' href="#pricing">
                            PRICING
                        </Navbar.Brand>
                        <NavDropdown title='MENU'
                            id="collapsible-nav-dropdown">
                            <NavDropdown.Item href="#action/3.1">
                                {user}
                                GEEKSFORGEEKS
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">
                                {icon}
                                SETTINGS
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">
                                LOGIN
                            </NavDropdown.Item>
                            <NavDropdown.Divider />
                        </NavDropdown>
                    </Nav>
                </Container>
            </Navbar>
            <h4 style={{
                textAlign: 'center',
                position: 'relative',
                marginTop: '20%'
            }}>
                Add image to React-bootstrap
                Dropdown Component
            </h4>
        </>
    );
}

export default App;

Output:

Output