Semantic-UI Sub Menu Content

Last Updated : 29 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 Sub Menu Content can contain another menu or nested menu inside the primary menu. The sub-menu can contain other extra links grouped under a category.

Semantic UI Sub Menu Content Classes:

dropdown: A container with this class can contain a dropdown menu inside a given menu.

Syntax: Create a container with a dropdown class and place it inside a menu to create a sub-menu as follows:

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

Example: In the following example, we have a submenu containing the programming languages as other links.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <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> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <strong>Semantic UI Sub Menu Content</strong> 
            <br /> 
            <br /> 
        </center> 
  
        <div class="ui compact menu"> 
            <div class="header item"> 
                GeeksforGeeks 
            </div> 
            <a class="item" href= 
"https://www.geeksforgeeks.org/data-structures" target="_blank"> 
                Data Structures 
            </a> 
            <a class="item" href= 
"https://www.geeksforgeeks.org/fundamentals-of-algorithms" target="_blank"> 
                Algorithms 
            </a> 
            <a class="item" href= 
"https://www.geeksforgeeks.org/machine-learning/" target="_blank"> 
                Machine Learning 
            </a> 
            <div class="ui simple dropdown item"> 
                Programming Languages 
                <i class="dropdown icon"></i> 
                <div class="menu"> 
                    <a class="item"> 
                        Python 
                    </a> 
                    <a class="item"> 
                        C++ 
                    </a> 
                    <a class="item"> 
                        Java 
                    </a> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>