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 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 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 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: <!DOCTYPE html> <html> <head> <style> ul { list-style-image: url( "ht
1 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
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 Search for Items in a Dropdown Menu using CSS & JavaScript?
In many web apps, dropdown menus offer a list of options for users. When the list is long, finding a specific item can be hard. To make this easier, we can add a search function to the dropdown menu. In this article we will explore how we can add search functionality in dropdown menu using CSS and J
3 min read
How to remove the default arrow icon from a dropdown list?
Removing the default arrow icon from a dropdown list (<select> element) means hiding the built-in down-facing arrow provided by the browser. This allows for custom styling of the dropdown, giving developers control over its appearance using custom icons or designs. Here we have some common app
2 min read
How to Insert Image in HTML from Folder?
The <img> src attribute is used to insert an image from folder in HTML. The src attribute accepts absolute and relative file path. Table of Content Using HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <img> ta
2 min read