Skip to content
Related Articles

Related Articles

Semantic-UI Sub Menu Content

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Mar, 2022
View Discussion
Improve Article
Save Article

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=
    <script src=
    <script src=
</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=
                Data Structures
            </a>
            <a class="item" href=
                Algorithms
            </a>
            <a class="item" href=
                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>


Output

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!