Semantic-UI Dropdown Floating Type

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 use to make your website look more amazing.

A Semantic UI Dropdown allows a user to select a value from a series of options. It offers 11 types of dropdowns and 3types of content Header, divider, and icon. In this article, we will learn about Floating Type.

The Floating Type is used for creating a dropdown menu that can appear to be floating below an element.

Semantic-UI Dropdown Floating Type class:

ui floating dropdown icon button: This class is used to create a dropdown menu that can appear to be floating below an element.
dropdown icon: This class enables the icon to provide the selected item from the list of items.

Syntax:

<div class="ui floating dropdown icon button">
  <i class="dropdown icon"></i>
   <div class="menu">
     <div class="item">
       <i class="edit icon"></i> 
          Edit Post
    </div>
</div>

Example 1: The below example illustrates the Semantic-UI Dropdown Floating 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"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div class="ui container"> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <h3>Semantic-UI Dropdown Floating Type</h3> 
                <div class="ui button">Update</div> 
                <div class="ui floating dropdown icon button"> 
                    <i class="dropdown icon"></i> 
                    <div class="menu"> 
                        <div class="item"> 
                          <i class="angle left icon"></i>  
                              Left angle icon 
                          </div> 
                        <div class="item"> 
                          <i class="angle right icon"></i>  
                              Right angle icon 
                          </div> 
                    </div> 
                </div> 
            </div> 
        <script> 
            $('.ui.dropdown').dropdown(); 
        </script> 
    </center> 
</body> 
  
</html>

Output:

Semantic-UI Dropdown Floating Type

Example 2: This example illustrates the Semantic-UI Dropdown Floating 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"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div class="ui container"> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <h3>Semantic-UI Dropdown Floating Type</h3> 
                <div class="ui button">Renew</div> 
                <div class="ui floating dropdown icon button"> 
                    <div class="menu"> 
                        <div class="item"> 
                          <i class="archive icon"></i>  
                              Archive icon 
                          </div> 
                        <div class="item"> 
                          <i class="barcode icon"></i>  
                              Barcode icon 
                          </div> 
                        <div class="item"> 
                          <i class="code icon"></i>  
                              Code icon 
                          </div> 
                    </div> 
                </div> 
            </div> 
        <script> 
            $('.ui.dropdown').dropdown(); 
        </script> 
    </center> 
</body> 
</html>