Skip to content
Related Articles

Related Articles

Semantic-UI Dropdown Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Mar, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!