Semantic-UI Dropdown Selection Type

Last Updated : 23 Feb, 2022

Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. In this article let us see the buttons of basic type.

Semantic UI Dropdown Selection Type provides different built-in classes for the dropdown menus which are very handy while making the navigation bars on the websites also they were very useful in the forms which may have multiple choices. In this article, we will see about the dropdown of selection type.

Semantic UI dropdown selection type used classes:

selection: This sets the dropdown menu of only selection type.
dropdown: This class indicates that a dropdown menu is needed.

Syntax:

<div class="ui selection dropdown">
...
</div>

Example 1: The following code demonstrates the drop-down of selection type.

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"
        integrity= 
        "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">Geeksforgeeks</h1> 
        <strong>Semantic UI Dropdown Selection Type</strong> 
        <br /> 
        <br /> 
        <div class="ui selection dropdown"> 
            <input type="hidden" name="webdev"> 
            <i class="dropdown icon"></i> 
            <div class="default text">WEB DEVELOPMENT COURSES</div> 
            <div class="menu"> 
                <div class="item" data-value="0">HTML</div> 
                <div class="item" data-value="1">CSS</div> 
                <div class="item" data-value="2">JAVASCRIPT</div> 
                <div class="item" data-value="3">FRONT-END</div> 
                <div class="item" data-value="4">BACK-END</div> 
                <div class="item" data-value="5">FULL STACK</div> 
            </div> 
        </div> 
    </center> 
  
    <script> 
        $('.ui.dropdown').dropdown(); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates the drop-down of selection type.

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"
        integrity= 
        "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">Geeksforgeeks</h1> 
        <strong>Semantic UI Search Dropdown Type</strong> 
        <br /><br /> 
          
        <select class="ui  dropdown"> 
            <option value="">Choose Branch</option> 
            <option value="cs">C.S.E</option> 
            <option value="ec">E.C.E</option> 
            <option value="ec">E.E.E</option> 
            <option value="ic">I.C.E</option> 
            <option value="it">I.T</option> 
            <option value="other">Other</option> 
        </select> 
    </center> 
  
    <script> 
        $('.ui.dropdown').dropdown(); 
    </script> 
</body> 
  
</html>