Semantic-UI Dropdown Floated Content

Last Updated : 29 Mar, 2022

Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website.

Semantic-UI Dropdown is used to choose the value from the given options. The Floated Content is used to float the content to the left or right. In this article, we will discuss Dropdown Floated Content in Semantic-UI.

Semantic-UI Dropdown Floated Content Class:

right floated: This class is used to float the content on the right.
left floated: This class can be used to float the content to the left side.

Syntax:

<div class="ui fluid selection dropdown">
  <i class="dropdown icon"></i>
  <span class="default text"> ... </span>
  <div class="menu">
    <div class="item">
      <i class="attention right floated icon"></i>
      ...
    </div>
    ...
  </div>
</div>

Example: The following example demonstrates the Semantic-UI Dropdown Floated Content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <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> 
    <div class="ui container center aligned"> 
        <h2 class="ui green header"> 
            GeeksforGeeks 
        </h2> 
        <h3> 
            Semantic-UI Dropdown Floated Content 
        </h3> 
        <div class="ui fluid selection dropdown"> 
            <i class="dropdown icon"></i>  
                <span class="default text">  
                    Choose any option  
                </span> 
            <div class="menu"> 
                <div class="item">  
                    <i class="book right floated icon"></i>  
                        Item 1  
                </div> 
                <div class="item">  
                    <i class="add right floated icon"></i> 
                        Item 2  
                </div> 
                <div class="item">  
                    <i class="phone right floated icon"></i> 
                        Item 3  
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        $('.ui.dropdown').dropdown(); 
    </script> 
</body> 
</html>