Open In App

Semantic-UI Menu Dropdown Item Content

Improve
Improve
Like Article
Like
Save
Share
Report

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 Menu Dropdown Item Content is used to place the dropdown item inside the menu. We can place a dropdown to group similar links under one link using the dropdown to make the menu compact.

Semantic UI Menu Dropdown Item Content Classes:

  • dropdown: The item with this class can contain a menu with some items inside it. Then whenever we interact with the dropdown, the menu inside it is displayed.

Syntax:

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

Example: In the following example, we have a dropdown item inside the menu.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <link href=
        rel="stylesheet"/>
  
  <script src=
  </script>
  
  <script src=
  </script>
</head>
  
<body>
  <center>
    <div class="ui container">
        <div class="ui header green">
          <h1>
            GeeksforGeeks
          </h1>
        </div>
  
        <strong>
          Semantic UI Menu Dropdown Item Content
        </strong>
        <br/><br/>
  
      <div class="ui compact menu">
        <div class="header item">
          GeeksforGeeks
        </div>
        <a class="item" 
           target="_blank"
           href=
          Data Structures
        </a>
  
        <a class="item"
           target="_blank" 
           href=
          Algorithms
        </a>
  
        <div class="ui simple dropdown item">
          Programming Languages
          <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item" 
               target="_blank" 
               href=
              Java
            </a>
  
            <a class="item" 
               target="_blank"
               href=
              Python
            </a>
  
            <a class="item"
               target="_blank"
               href=
              C++
            </a>
          </div>
        </div>
      </div>
    </div>
  </center>
</body>
  
</html>


Output:

Semantic-UI Menu Dropdown Item Content

Semantic-UI Menu Dropdown Item Content

Reference: https://semantic-ui.com/collections/menu.html#dropdown-item



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