Open In App

Semantic-UI Dropdown States

Improve
Improve
Like Article
Like
Save
Share
Report

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 3 types of content Header, divider, and icon. In this article, we will learn about all the states of the dropdown.

Semantic-UI Dropdown States:

  • Loading: This is used to create a dropdown that shows its data is currently loading.
  • Error: This is used to specify the error in the dropdown.
  • Active: This is used to create an active dropdown that is having its menu open.
  • Disabled: This is used to specify that the dropdown is not accessible by the user.

Syntax:

<div class="ui Dropdown-States dropdown.">
     Dropdown <i class="dropdown icon"></i>
     <div class="menu">
           .......
     </div>
</div>

Example 1: Below example demonstrates the use of Semantic-UI Dropdown loading States Class.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Semantic-UI Dropdown Loading State</title>
   
  <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 Loading State</h3>
      <div class="ui loading dropdown">
        Company <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">GFG</div>
          <div class="item">gfg</div>
        </div>
      </div>
    </div>
    <script>
      $('.ui.dropdown').dropdown();
    </script>
  </center>
</body>
 
</html>


Output:

Semantic-UI Dropdown States

Semantic-UI Dropdown States

Example 2: Below example demonstrates the use of Semantic-UI Dropdown error States Class.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <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 error State</p>
 
    </b>
    <hr><br/>
    <strong>Dropdown with error option:</strong>
    <br/><br/>
 
    <div class="ui error dropdown">
      Error Dropdown <i class="dropdown icon"></i>
      <div class="menu">
        <div class="item">Error option 1</div>
        <div class="item">Error option 2</div>
        <div class="item">Error option 3</div>
        <div class="item">Error option 4</div>
      </div>
    </div>
  </div>
 
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>
 
</html>


Output:

Semantic-UI Dropdown States

Semantic-UI Dropdown States

Example 3: Below example demonstrates the use of Semantic-UI Dropdown active States Class.

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>Semantic-UI Dropdown Active State</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 Active State</h3>
 
      <div class="ui simple active dropdown">
        Options <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>
      </div>
    </div>
    <script>
      $('.ui.dropdown').dropdown();
    </script>
  </center>
</body>
 
</html>


Output:

Semantic-UI Dropdown States

Semantic-UI Dropdown States

Example 4: Below example demonstrates the use of Semantic-UI Dropdown disabled States Class.

HTML




<!DOCTYPE html>
<html>
     
<head>
  <title>Semantic-UI Dropdown Disabled State</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 Disabled State</h3>
 
      <div class="ui disabled dropdown">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Item-A</div>
          <div class="item">Item-B</div>
        </div>
      </div>
    </div>
    <script>
      $('.ui.dropdown').dropdown();
    </script>
  </center>
</body>
 
</html>


Output:

Semantic-UI Dropdown States

Semantic-UI Dropdown States

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



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