Open In App

Semantic-UI Dropdown Simple Type

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 has a bunch of components for user interface design. One of them is “Dropdown”. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. There are different types of dropdowns. One of them is simple.

Semantic UI Dropdown Simple Type:  To use different variations and types of dropdowns we need to add a script. However, if the user just needs a dropdown to open as per his use then a simple dropdown with no script is required to be added. A simple dropdown will just display its menu without JavaScript. You cannot select any value. It can be used in mock-up UI’s and templates to describe a menu.

Semantic UI Dropdown Simple Type Class:

  • simple: This class is used to specify the simple type of dropdown.

Syntax:

 <div class="ui simple dropdown">
   ... <i class="dropdown icon"></i>
   <div class="menu">
     <div class="item">...</div>
     ...
   </div>
 </div>

Example 1: The below example illustrates the Semantic UI Dropdown Simple Type. This example demonstrates the dropdown simple type using the simple class. As shown in the image below the user is able to open the dropdown menu and see all the available menu options. He is unable to select any options as no script is added.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
     rel="stylesheet" />
</head>
  
<body>
    <div class="ui container">
        <br /><br />
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>    
            <p>Semantic UI Dropdown Simple Type</p>
        </b>
        <hr>
        <br />
        <strong>Simple Dropdown:</strong><br /><br />
        <div class="ui compact menu">
            <div class="ui simple dropdown item">
                <i class="user circle icon"></i> Access
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item">Public</div>
                    <div class="item">Private</div>
                    <div class="item">Protected</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

Simple Dropdown

Example 2: This example demonstrates the dropdown simple type using the simple class. You can view all the options as shown in the image below. 

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
      rel="stylesheet" />
      
</head>
<body>
    <div class="ui container">
        <br/><br/>
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
            <p>Semantic UI Dropdown Simple Type</p>
        </b>
        <hr>
        <br />
        <strong>Simple Dropdown:</strong><br /><br />
        <span> Click to view all Javascripts frameworks  
                
            <div class="ui simple inline dropdown">
                <span class="text">JS Frameworks</span>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item">REACT</div>
                    <div class="item">ANGULAR</div>
                    <div class="item">VUE</div>
                    <div class="item">EMBER</div>
                    <div class="item">BACKBONE</div>
                </div>
            </div>
        </span>
    </div>
</body>
</html>


Output: 

Simple Dropdown

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



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