Semantic-UI Menu Dropdown Item Content

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=
"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">
        <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=
"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 class="ui simple dropdown item">
          Programming Languages
          <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item" 
               target="_blank" 
               href=
"https://www.geeksforgeeks.org/java/">
              Java
            </a>

            <a class="item" 
               target="_blank"
               href=
"https://www.geeksforgeeks.org/python/python-programming-language-tutorial/
              Python
            </a>

            <a class="item"
               target="_blank"
               href=
"https://www.geeksforgeeks.org/c-plus-plus/">
              C++
            </a>
          </div>
        </div>
      </div>
    </div>
  </center>
</body>

</html>

Output:

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

Semantic-UI Menu Dropdown Item Content

Explore