How to Add Image into Dropdown List for each items?
Last Updated :
29 Jul, 2024
Enhancing your dropdown list with images can significantly improve the visual appeal and user experience of your website or application. This guide will provide a step-by-step example of how to incorporate images into each item of a dropdown list using HTML and CSS.
Below are the approaches for adding Images into Dropdown List for each item:
Using CSS
In this approach, we are using vanilla CSS for adding images into dropdown menu. 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: This example shows the implementation of the above-explained approach.
HTML
<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg"
width="20" height="15"> India</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg"
width="20" height="15"> USA</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg"
width="20" height="15"> England</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg"
width="20" height="15"> Brazil</a>
</div>
</div>
</center>
</body>
</html>
Output:
In above example, you need to "hover" your mouse pointer over button to see the dropdown list.
Using Bootstrap
In this approach, we are using the Dropdown list component of Bootstrap. we have integrated Bootstrap with jQuery and Popper.js for a responsive and interactive design. It centers the content using the `<center>` tag and displays a green heading "GeeksforGeeks". A Bootstrap button (`btn btn-success dropdown-toggle`) triggers a dropdown menu containing a list of items. Each item features a country flag image and name, ensuring a visually appealing and user-friendly interface.
Example: This example shows the implementation of the above-explained approach.
HTML
<!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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg"
width="20" height="15"> India</li>
<li class="dropdown-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg"
width="20" height="15"> USA</li>
<li class="dropdown-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg"
width="20" height="15"> England</li>
<li class="dropdown-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg"
width="20" height="15"> Brazil</li>
</ul>
</div>
</center>
</body>
</html>
Output:
Note: You can use <div> tag instead of <ul> tag and <a> tag instead of <li> tag in above example.
Similar Reads
How to add an image as the list-item marker in a list using CSS ?
The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS. Syntax: list-style-image: none | url | initial | inherit; Example: html <!DOCTYPE html> <html> <head> <style> ul { list-style-image: url(
1 min read
How to Add Headers inside the Dropdown Menu in Bootstrap ?
Drop-down menus are a common element used in web development to provide users with a list of options. Adding headers inside a drop-down menu can improve its organization and usability. This means to add headers inside the dropdown menu, use the .dropdown-header class in Bootstrap. Table of Content U
3 min read
How to Add Headers inside the Dropdown Menu in Bootstrap ?
Bootstrap provides the ability to create headers within dropdown menus, which enhances the clarity and organization of your website's navigation. Headers serve as titles or categories that group related dropdown items together, making it easier for users to quickly locate what they are looking for a
2 min read
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 Inst
3 min read
How to Create Dropdown List in Google Sheets
Adding a dropdown list in Google Sheets can make your spreadsheets more dynamic and user-friendly. This feature allows you to create a list of options that users can select from, making data entry quicker and reducing errors. Whether you're managing a budget, tracking projects, or organizing data, d
9 min read
JavaScript - How to Create Dropdown List?
The dropdown list is a toggleable menu that allows to user to choose one option from multiple. The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences.Creating Dr
3 min read
How to set alignment of each dropdown widget in Jupyter?
In this article, we are going to see how to set the alignment of each dropdown widget in Jupyter. A standard widget in Jupyter which consumes less space and helps you to select an element is known as a dropdown widget. Do you want to set the alignment of your dropdown widget? The property of a dropd
2 min read
How to define a drop-down list in HTML5 ?
In this article, we define a Drop-Down List By using the <select> Element in the Document. This tag is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of drop-down list.Note: The tag is used in a form to receive user response.
1 min read
How to specify the name for drop-down list in HTML5 ?
Drop-down lists are also another way to allow people to choose only one choice from a number of alternatives. Since the default option is usually the first item on the list, using the drop-down list can be a safe choice if you know that one option is always preferred over the others. The drop-down l
4 min read
How to show/hide dropdown menu on mouse hover using CSS ?
The approach of this article is to show and hide the dropdown menu on mouse hover using CSS. The task can be done by using the display property and :hover selector. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to Show Hide Dropdown Using CSS
2 min read