Open In App

Semantic-UI Dropdown Message Content

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 3types of content Header, divider, and icon. In this article, we will learn about the Message content. Semantic-UI Dropdown Message Content is used to create a dropdown menu that contains a message.

Syntax:

<div class="ui floating labeled icon dropdown button">
   <div class="ui error message"></div>
</div>

The below examples illustrate the Semantic-UI Dropdown Message Content:

Example 1: 

HTML




<!DOCTYPE html>
<html>
  <head>
    <link href=
      rel="stylesheet"
    />
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src=
   </script>
  </head>
 
  <body>
    <center>
      <div class="ui container">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>Semantic-UI Dropdown Message Content</h3>
        <div class="ui floating labeled icon dropdown button">
          <span class="text">Login</span>
          <div class="menu">
            <div class="ui error message">
              <div class="header">Error</div>
               
<p>An error occurred while login</p>
 
            </div>
          </div>
        </div>
      </div>
      <script>
        $(".ui.dropdown").dropdown();
      </script>
    </center>
  </body>
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  <head>
    <link href=
      rel="stylesheet"
    />
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src=
   </script>
  </head>
 
  <body>
    <center>
      <div class="ui container">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>Semantic-UI Dropdown Message Content</h3>
        <div class="ui floating labeled icon dropdown button">
          <i class="filter Company"></i>
          <span class="text">Company Name</span>
          <div class="menu">
            <div class="ui error message">
              <div class="header">Empty</div>
               
<p>No company name has been found</p>
 
            </div>
          </div>
        </div>
      </div>
      <script>
        $(".ui.dropdown").dropdown();
      </script>
    </center>
  </body>
</html>


Output:

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



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