Open In App

Semantic-UI Dropdown Types

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Semantic UI has a bunch of components for user interface design. One of them is “Dropdown”. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. There are different types of dropdowns based on menu direction and the way it shows up. Let us see this type of dropdown.

Semantic UI Dropdown Type:

  • Dropdown: This indicates that a dropdown menu is needed.
  • Selection: This sets the dropdown menu of only selection type.
  • Search selection: This enables us to search for an option from the select dropdown list. The selection class is not required if we are using a select HTML tag otherwise it is required to mention as the class.
  • Multiple selection: This is used for creating a select dropdown that can allow multiple selections.
  • Multiple search selection: This is used to is used for creating a select dropdown that allows multiple search selections.
  • Search dropdown: This is used to create a searchable dropdown.
  • Search in-menu: This is used to make a dropdown that includes a search prompt inside its menu.
  • Inline: This is used to specify the inline type of dropdown.
  • Pointing: This is used to make the menu point in a specific direction.
  • Floating: This is used to make a dropdown to float below an element.
  • Simple: This is used to specify the simple type of dropdown.

Syntax:

<div class="ui dropdown-type-class dropdown">
    .......
</div>

Example 1: The below example illustrates the Semantic-UI Dropdown dropdown Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
      Semantic-UI Dropdown Types
    </title>
    <link rel="stylesheet"
          href=
 
    <script src=
    </script>
 
    <script src=
    </script>
</head>
 
<body style="margin-inline: 10rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>
 
    <h3>
      Semantic-UI Dropdown Types
    </h3><br>
 
    <div class="ui dropdown">
      <div class="text">
        Data Structure
      </div>     
      <i class="dropdown icon"></i>
 
      <div class="menu">
        <div class="item">
          Algorithms
        </div>
 
        <div class="item">
          Gate
        </div>
 
        <div class="divider"></div>
 
        <div class="item">
          <i class="dropdown icon"></i>
            Jobs
          <div class="menu">
            <div class="item">Apply for Jobs</div>
            <div class="item">Post a Job</div>
          </div>
        </div>
 
        <div class="item">
          Write an Article
        </div>
      </div>
    </div>
  </center>
   
  <script>
      $('.ui.dropdown').dropdown();
  </script>
</body>
 
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 2: The below example illustrates the Semantic-UI Dropdown selection Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <link href=
        rel="stylesheet"/>
        integrity=
    "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
  </script>
  <script src=
  </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:

Semantic-UI Dropdown Types

Semantic UI Dropdown selection Types

Example 3: The below example illustrates the Semantic-UI Dropdown search selection Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <h1 class="ui green header">Geeksforgeeks</h1>
        <strong>Semantic UI Search Selection Dropdown Type</strong>
        <br/>
        <br/>
        <select class="ui search selection dropdown">
            <option value="">Select Languages</option>
            <option value="C">C</option>
            <option value="CPP">C++</option>
            <option value="Java">Java</option>
            <option value="Python">Python</option>
            <option value="C#">C#</option>
            <option value="JS">JavaScript</option>
        </select>
    </center>   
 
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 4: The below example illustrates the Semantic-UI Dropdown multiple selection Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
  <center>
    <div class="ui container">
      <h1 style="color:green;">
        GeeksforGeeks
      </h1>
 
      <h3>Semantic-UI Dropdown Multiple Selection Type</h3>
      <select multiple="" c
         lass="ui fluid dropdown">
        <option value="">
        Departments
        </option>
        <option value="HR">
        HR
        </option>
        <option value="Sales">
        Sales
        </option>
        <option value="Marketing">
        Marketing
        </option>
        <option value="Dev">
        Development
        </option>
        <option value="Testing">
        Testing
        </option>
        <option value="Delivery">
        Delivery
        </option>
      </select>
    </div>
  </center>
   
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>
 
</html>


Output: 

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 5: The below example illustrates the Semantic-UI Dropdown multiple search selection Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Dropdown Types</title>
    <link href=
          rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div class="ui container">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>Semantic-UI Dropdown Multiple Search Selection Type</h3>
            <select class="ui fluid search dropdown"
                    multiple="">
                <option value="">Company Name</option>
                <option value="AL">GeeksforGeeks</option>
                <option value="AK">Apple</option>
                <option value="AZ">Amazon</option>
            </select>
        </div>
        <script>
            $('.ui.dropdown').dropdown();
        </script>
    </center>
</body>
 
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 6: The below example illustrates the Semantic-UI Dropdown search dropdown Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Dropdown Types</title>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <h1 class="ui green header">Geeksforgeeks</h1>
        <strong>Semantic UI Search Selection Dropdown Type</strong>
        <br/>
        <br/>
 
        <div class="ui floating dropdown labeled search icon button">
              <i class="book icon"></i>
              <span class="text">Select Course</span>
              <div class="menu">
                <div class="item">DSA</div>
                <div class="item">OOP's</div>
                <div class="item">DBMS</div>
                <div class="item">OS</div>
              </div>
        </div>
    </center>   
 
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
   
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 7: The below example illustrates the Semantic-UI Dropdown Inline Type.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Dropdown Types</title>
    <link href=
          rel="stylesheet" />
    <script src=
</script>
    <script src=
</script>
</head>
<body>
    <div class="ui container">
        <br /><br />
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
 
<p>Semantic UI Dropdown Inline Type</p>
 
</b>
        <hr>
        <br />
        <strong>Inline Dropdown:</strong><br /><br />
        <span> This is a
            <div class="ui inline dropdown">
                <span class="text">Dropdown</span>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item">
                        option 1
                    </div>
                    <div class="item">
                        option 2
                    </div>
                    <div class="item">
                        option 3
                    </div>
                    <div class="item">
                        option 4
                    </div>
                    <div class="item">
                        option 5
                    </div>
                </div>
            </div>
        inline with text .
        </span>
        <script>
            $('.ui.dropdown').dropdown();
        </script>
    </div>
</body>
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 8: The below example illustrates the Semantic-UI Dropdown Pointing Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Dropdown Types</title>
    <link href=
          rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <br /><br />
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
             
 
<p>Semantic UI Dropdown Pointing Type</p>
 
 
        </b>
        <hr><br />
        <strong> Choose your road and path:</strong>
        <br /><br />
        <center>
            <div class="ui bottom pointing dropdown button">
                <span class="text">North Road</span>
                <div class="menu">
                    <div class="header">Bottom pointing dropdown</div>
                    <div class="item">Path 1</div>
                    <div class="item">Path 2</div>
                </div>
            </div>
            <br /><br />
            <div class="ui right pointing dropdown button"
                style="margin-right:65px;">
                <span class="text">Right Road</span>
                <div class="menu">
                    <div class="header">Right pointing dropdown</div>
                    <div class="item">Path 1</div>
                    <div class="item">Path 2</div>
                </div>
            </div>
            <div class="ui left pointing dropdown button" s
                tyle="margin-left:65px;">
                <span class="text">Left Road</span>
                <div class="menu">
                    <div class="header">Left pointing dropdown</div>
                    <div class="item">Path 1</div>
                    <div class="item">Path 2</div>
                </div>
            </div>
            <br /><br />
            <div class="ui top pointing dropdown button">
                <span class="text">South Road</span>
                <div class="menu">
                    <div class="header">Top pointing dropdown</div>
                    <div class="item">Path 1</div>
                    <div class="item">Path 2</div>
                </div>
            </div>
        </center>
 
        <script>
            $('.ui.dropdown').dropdown();
        </script>
    </div>
</body>
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 9: The below example illustrates the Semantic-UI Dropdown Floating Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Semantic-UI Dropdown Types</title>
  <link href=
        rel="stylesheet"/>
 
  <script src=
          integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous">
  </script>
 
  <script src=
  </script>
</head>
 
<body>
  <center>
    <h1 class="ui green header">Geeksforgeeks</h1>
    <strong>Semantic UI floating Type</strong>
    <br/><br/>
 
    <div class="ui green buttons">
      <div class="ui button">Select</div>
      <div class="ui floating dropdown icon button">
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">
            <i class="envelope icon"></i>
            Mail Us
          </div>
          <div class="item">
            <i class="phone icon"></i>
            Contac Us
          </div>
        </div>
      </div>
    </div>
  </center>   
 
  <script>
      $('.ui.dropdown').dropdown();
  </script>
</body>
 
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Example 10: The below example illustrates the Semantic-UI Dropdown Simple Type.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Dropdown Types</title>
    <link href=
          rel="stylesheet" />
</head>
 
<body>
    <div class="ui container">
        <br /><br />
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>   
             
 
<p>Semantic UI Dropdown Simple Type</p>
 
 
        </b>
        <hr>
        <br />
        <strong>Simple Dropdown:</strong>
        <br /><br />
        <div class="ui compact menu">
            <div class="ui simple dropdown item">
                <i class="user circle icon"></i> Access
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item">Public</div>
                    <div class="item">Private</div>
                    <div class="item">Protected</div>
                </div>
            </div>
        </div>
    </div>
</body>
   
</html>


Output:

Semantic-UI Dropdown Types

Semantic-UI Dropdown Types

Reference: https://semantic-ui.com/modules/dropdown.html#dropdown



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads