How to Add Image into Dropdown List for each items ?

Programmers can add images into the dropdown list for each items by two methods which are mentioned below.

Method 1: Using CSS The .dropdown class uses position: relative; is used when the user needs the content to be set right under the dropdown button (It is done using position: absolute).

The .dropdown-content class holds the actual dropdown content. Note that the “min-width” is 160px. The programmer can set this according to the need. Add <img> tag in dropdown content to insert image into dropdown list for each items.

Note: In case the user needs the width of the content to be as wide as the dropdown button, please set the width to 100% (Set overflow: auto to get scroll on small screens). Instead of using a border, we have used the CSS box-shadow property to create the dropdown menu like a “card”. The :hover selector is used to display the dropdown menu when the user moves the mouse over the dropdown button.

Example:



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Adding image to dropdown list</title>
    <style>
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
  
        .dropdown {
            position: relative;
            display: inline-block;
        }
  
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 
                0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
  
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
  
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }
  
        .dropdown:hover .dropdown-content {
            display: block;
        }
  
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <div class="dropdown">
            <button class="dropbtn">
                Country Flags
            </button>
              
            <div class="dropdown-content">
                <a href="#">
                    <img src=
                    width="20" height="15"> India</a>
  
                <a href="#">
                    <img src=
                    width="20" height="15"> USA</a>
                <a href="#">
                    <img src=
                    width="20" height="15"> England</a>
                <a href="#">
                    <img src=
                    width="20" height="15"> Brazil</a>
            </div>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

In above example, you need to “hover” your mouse pointer over button to see the dropdown list.

Method 2: Using Bootstrap: Dropdowns can be implemented from <a> or <button> components. For showing records or lists, toggle contextual overlays along with using the Bootstrap dropdown plugin.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content=
            "width=device-width, initial-scale=1,
            shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, 
        then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <div class="dropdown">
            <button class="btn btn-success 
                    dropdown-toggle" type="button" 
                    id="dropdownMenuButton" 
                    data-toggle="dropdown"
                    aria-haspopup="true" 
                    aria-expanded="false">
                Country Flags
            </button>
  
            <ul class="dropdown-menu" 
                aria-labelledby="dropdownMenuButton">
                <li class="dropdown-item">
                    <img src=
                    width="20" height="15"> India</li>
                <li class="dropdown-item">
                    <img src=
                    width="20" height="15"> USA</li>
                <li class="dropdown-item">
                    <img src=
                    width="20" height="15"> England</li>
                <li class="dropdown-item">
                    <img src=
                    width="20" height="15"> Brazil</li>
            </ul>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

In above example, you can toggle (click on and off) button to see the dropdown list.

Note: You can use <div> tag instead of <ul> tag and <a> tag instead of <li> tag in above example.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.