Semantic-UI Dropdown Label Content

Last Updated : 22 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.

Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3types of content Header, divider, and icon. In this article, we will learn about the Label content.

Semantic-UI Dropdown Label Content is used to create a dropdown menu that contains a label.

Syntax:

<div class="ui labeled Description dropdown button">
 <div class="item">
     <div class="ui red empty circular label"></div>
     Important
   </div>
</div>

The below example illustrates the Semantic-UI Dropdown Label Content:

Example-1:

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 Label Content</h3> 
        <div class="ui floating labeled icon dropdown button"> 
          <span class="text">Color</span> 
          <div class="menu"> 
            <div class="item"> 
              <div class="ui red empty circular label"></div> 
              Danger or Warning 
            </div> 
          </div> 
        </div> 
      </div> 
      <script> 
        $(".ui.dropdown").dropdown(); 
      </script> 
    </center> 
  </body> 
</html> 

Output:

Semantic-UI Dropdown Label Content

Example-2:

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 Label Content</h3> 
        <div class="ui floating labeled icon dropdown button"> 
          <i class="filter icon"></i> 
          <span class="text">Colors Name</span> 
          <div class="menu"> 
            <div class="ui left icon input"> 
              <i class="search icon"></i> 
              <input type="text" name="search" 
                placeholder="Search the color"/> 
            </div> 
            <div class="item"> 
              <div class="ui red empty circular label"></div> 
              Red color 
            </div> 
            <div class="item"> 
              <div class="ui green empty circular label"></div> 
              Green color 
            </div> 
            <div class="item"> 
              <div class="ui black empty circular label"></div> 
              Black color 
            </div> 
          </div> 
        </div> 
      </div> 
      <script> 
        $(".ui.dropdown").dropdown(); 
      </script> 
    </center> 
  </body> 
</html> 