Semantic-UI Popup Menu Content

Last Updated : 11 Mar, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Menu is a group of elements that displays different navigation actions. We can navigate to different pages of the website. A menu can be a combination of links, a search bar and dropdowns.

Semantic UI Popup Menu Content is used to display large content or additional menu using a popup menu. The popup menu can contain a whole new menu. The menu is displayed using Semantic Popup.

Semantic UI Popup Menu Content Classes:

popup: This class is used to create a container and the popup will be displayed.

Syntax:

<div class="ui menu">
  <a class="browse item">
    Other tutorials
    <i class="dropdown icon"></i>
  </a>
  
  <div class="ui fluid popup">
      ...
  </div>
</div>

Example: In the following example, we have a popup at the front of the menu which displays an additional menu.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <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"> 
        <div class="ui header green"> 
          <h1> 
            GeeksforGeeks 
          </h1> 
        </div> 
  
        <strong> 
          Semantic UI Popup Menu Content 
        </strong> 
        <br/><br/> 
  
        <div class="ui menu"> 
          <a class="browse item"> 
             Other tutorials 
            <i class="dropdown icon"></i> 
          </a> 
  
          <div class="ui fluid popup"> 
            <div class="ui three column relaxed 
                        equal height divided grid"> 
              <div class="column">Data Structure</div> 
            <div class="column">Algorithms</div> 
            <div class="column">Web Development</div> 
          </div> 
        </div> 
  
        <div class="header item"> 
          GeeksforGeeks 
        </div> 
          
        <a class="item"
           target="_blank"
           href= 
"https://www.geeksforgeeks.org/data-structures"> 
          Data Structures 
        </a> 
  
        <a class="item" 
           target="_blank"
           href= 
"https://www.geeksforgeeks.org/fundamentals-of-algorithms"> 
          Algorithms 
        </a> 
      </div> 
    </div> 
  </center> 
    
  <script> 
    $('.item').popup({}) 
  </script> 
</body> 
  
</html>