Semantic-UI Dropdown Variations
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
Please Login to comment...