Semantic-UI Menu Dropdown Item Content Last Updated : 11 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts. Semantic UI Menu is a group of elements that displays different navigation actions. We can navigate to different pages of the website. A menu can be a combination of links, a search bar and dropdowns. Semantic UI Menu Dropdown Item Content is used to place the dropdown item inside the menu. We can place a dropdown to group similar links under one link using the dropdown to make the menu compact. Semantic UI Menu Dropdown Item Content Classes: dropdown: The item with this class can contain a menu with some items inside it. Then whenever we interact with the dropdown, the menu inside it is displayed. Syntax: <div class="ui menu"> ... <div class="ui dropdown item"> ... </div> </div> Example: In the following example, we have a dropdown item inside the menu. HTML <!DOCTYPE html> <html> <head> <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"> <div class="ui header green"> <h1> GeeksforGeeks </h1> </div> <strong> Semantic UI Menu Dropdown Item Content </strong> <br/><br/> <div class="ui compact menu"> <div class="header item"> GeeksforGeeks </div> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/data-structures"> Data Structures </a> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/fundamentals-of-algorithms"> Algorithms </a> <div class="ui simple dropdown item"> Programming Languages <i class="dropdown icon"></i> <div class="menu"> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/java/"> Java </a> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/python-programming-language/"> Python </a> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/c-plus-plus/"> C++ </a> </div> </div> </div> </div> </center> </body> </html> Output: Semantic-UI Menu Dropdown Item Content Reference: https://semantic-ui.com/collections/menu.html#dropdown-item Comment More infoAdvertise with us Next Article Semantic-UI Dropdown Image Content M manavsarkar07 Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Collections Similar Reads Semantic-UI Dropdown Image 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. A Semantic UI dropdown allows a user to select a value from a series of options. Sema 2 min read Semantic-UI Dropdown Input 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. A Semantic UI Dropdown allows a user to select a value from a series of options. Sema 2 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 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 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 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 Like