Semantic-UI Dropdown Image Content Last Updated : 27 Feb, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. A Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3types of content Header, divider, and icon. In this article, we will learn about Image Content. Semantic-UI Dropdown Image Content is used to create a dropdown menu that contains an image. Semantic-UI Dropdown Content Image Class: image: This class is used to add an image to the specified dropdown menu. Syntax: <div class="ui dropdown button"> <img class="...image" src="#"> ... </div> </div> The below example illustrates the Semantic-UI Dropdown Image Content: Example-1: HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Dropdown Image Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Image Content</h3> <div class="ui floating labeled icon dropdown button"> <i class="add user icon"></i> <span class="text">Add a Company name</span> <div class="menu"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> GeeksforGeeks Logo </div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center> </body> </html> Output: Semantic-UI Dropdown Image Content Example-2: HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Dropdown Image Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Image Content</h3> <div class="ui floating labeled icon dropdown button"> <i class="add user icon"></i> <span class="text">Add different logo of GFG</span> <div class="menu"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> GeeksforGeeks Logo1 </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> GeeksforGeeks Logo2 </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"> GeeksforGeeks Logo3 </div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center> </body> </html> Output: Semantic-UI Dropdown Image Content Reference: https://semantic-ui.com/modules/dropdown.html#image Comment More infoAdvertise with us Next Article Semantic-UI Dropdown Message Content K Kanchan_Ray Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Modules Similar Reads Semantic-UI Dropdown Message Content Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI dropdown allows a user to select a value from a series of options. Semant 2 min read Semantic-UI Dropdown Label Content Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI dropdown allows a user to select a value from a series of options. Semant 2 min read Semantic-UI Dropdown Content Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive 6 min read Semantic-UI Dropdown Icon Content Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI dropdown allows a user to select a value from a series of options. Semant 2 min read Semantic-UI Form Dropdown Content Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive 2 min read Semantic-UI Dropdown Header Content Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is “Drop 3 min read Like