Semantic-UI Dropdown States

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=
"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>
  <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:

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

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>
  <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:

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=
"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 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:

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=
"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 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:

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

Semantic-UI Dropdown States

Explore