Semantic-UI Menu Dropdown Item Content
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 > w3wiki </ h1 > </ div > < strong > Semantic UI Menu Dropdown Item Content </ strong > < br />< br /> < div class = "ui compact menu" > < div class = "header item" > w3wiki </ div > < a class = "item" target = "_blank" href = Data Structures </ a > < a class = "item" target = "_blank" href = Algorithms </ a > < div class = "ui simple dropdown item" > Programming Languages < i class = "dropdown icon" ></ i > < div class = "menu" > < a class = "item" target = "_blank" href = Java </ a > < a class = "item" target = "_blank" href = Python </ a > < a class = "item" target = "_blank" href = C++ </ a > </ div > </ div > </ div > </ div > </ center > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/collections/menu.html#dropdown-item
Contact Us