Semantic-UI Dropdown Variations
Last Updated :
24 Mar, 2022
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 make your website look more amazing. It uses a class to add CSS to the elements.
The dropdown allows users to choose one value among multiple values. It is an essential part of a webpage, as it increases interactivity. Semantic UI provides us with a styled dropdown. Let’s have a look at various Dropdown Variations.
Semantic UI Dropdown Variations:
- Scrolling: This variation allows the dropdown to be scrollable.
- Compact: This variation removes the minimum width from the dropdown menu.
- Fluid: The dropdown takes the full width of its parent.
- Menu Direction: Semantic UI allows us to specify the direction in which the menu should open.
Syntax:
<div class="ui Dropdown-Variation-class dropdown">
<i class="dropdown icon"></i>
<div class="text">...</div>
<div class="menu">
<div class="item">...</div>
...
</div>
</div>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example, we have created a scrolling dropdown.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Dropdown Variations</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Dropdown Variations</ h4 >
< hr >
< br />
< div class = "ui scrolling dropdown" >
< input type = "hidden" name = "partner" >
< div class = "default text" >Select your lab partner</ div >
< i class = "dropdown icon" ></ i >
< div class = "menu" >
< div class = "item" >Lilly</ div >
< div class = "item" >Jon</ div >
< div class = "item" >Dave</ div >
< div class = "item" >Joey</ div >
< div class = "item" >Ross</ div >
< div class = "item" >Monica</ div >
< div class = "item" >Rachel</ div >
< div class = "item" >Chandler</ div >
< div class = "item" >Phoebe</ div >
< div class = "item" >Mike</ div >
< div class = "item" >Richard</ div >
< div class = "item" >Vikram</ div >
< div class = "item" >Regina</ div >
< div class = "item" >Philangie</ div >
< div class = "item" >Thomas</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.dropdown').dropdown();
</ script >
</ body >
</ html >
|
Output:
Scrolling Dropdown
Example 2: In the below example, we have created a compact dropdown.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Dropdown Variations</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Dropdown Variations</ h4 >
< hr >
< br />
< div class = "ui compact selection dropdown" >
< input type = "hidden" name = "partner" >
< div class = "default text" >Select your lab partner</ div >
< i class = "dropdown icon" ></ i >
< div class = "menu" >
< div class = "item" >Lilly</ div >
< div class = "item" >Jon</ div >
< div class = "item" >Dave</ div >
< div class = "item" >Joey</ div >
< div class = "item" >Ross</ div >
< div class = "item" >Monica</ div >
< div class = "item" >Rachel</ div >
< div class = "item" >Chandler</ div >
< div class = "item" >Phoebe</ div >
< div class = "item" >Mike</ div >
< div class = "item" >Richard</ div >
< div class = "item" >Vikram</ div >
< div class = "item" >Regina</ div >
< div class = "item" >Philangie</ div >
< div class = "item" >Thomas</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.dropdown').dropdown();
</ script >
</ body >
</ html >
|
Output:
Compact Dropdown
Example 3: In the below example, we have created a fluid dropdown.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Dropdown Variations</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Dropdown Variations</ h4 >
< hr >
< br />
< div class = "ui fluid selection dropdown" >
< input type = "hidden" name = "partner" >
< div class = "default text" >Select your lab partner</ div >
< i class = "dropdown icon" ></ i >
< div class = "menu" >
< div class = "item" >Lilly</ div >
< div class = "item" >Jon</ div >
< div class = "item" >Dave</ div >
< div class = "item" >Joey</ div >
< div class = "item" >Ross</ div >
< div class = "item" >Monica</ div >
< div class = "item" >Rachel</ div >
< div class = "item" >Chandler</ div >
< div class = "item" >Phoebe</ div >
< div class = "item" >Mike</ div >
< div class = "item" >Richard</ div >
< div class = "item" >Vikram</ div >
< div class = "item" >Regina</ div >
< div class = "item" >Philangie</ div >
< div class = "item" >Thomas</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.dropdown').dropdown();
</ script >
</ body >
</ html >
|
Output:
Fluid Dropdown
Example 4: In the below example, we have created a dropdown with a left menu direction.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Dropdown Variations</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Dropdown Variations</ h4 >
< hr >
< br />
< div class = "ui floating labeled icon dropdown button" >
< i class = "dropdown icon" ></ i >
< span class = "text" >Select your lab partner</ span >
< div class = "right menu" >
< div class = "item" >
< i class = "dropdown icon" ></ i >
< span class = "text" >Male</ span >
< div class = "right menu" >
< div class = "item" >Joey</ div >
< div class = "item" >Ross</ div >
< div class = "item" >Chandler</ div >
< div class = "item" >Richard</ div >
< div class = "item" >Vikram</ div >
</ div >
</ div >
< div class = "item" >
< i class = "dropdown icon" ></ i >
< span class = "text" >Female</ span >
< div class = "right menu" >
< div class = "item" >Monica</ div >
< div class = "item" >Rachel</ div >
< div class = "item" >Phoebe</ div >
< div class = "item" >Regina</ div >
< div class = "item" >Philangie</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.dropdown').dropdown();
</ script >
</ body >
</ html >
|
Output:
Left menu direction dropdown
Reference: https://semantic-ui.com/modules/dropdown.html
Share your thoughts in the comments
Please Login to comment...