Semantic-UI Sub Menu 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 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>

Output

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

Semantic-UI Sub Menu Content

Explore