Semantic-UI Menu Types

Last Updated : 04 Apr, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

A Menu is a component that displays a group of items that serve as navigation between one section of the website to another. It is an essential component and is always present in any website in order to make the navigation easy for the user. By default, the Menu is horizontal and displays the items inside it in a horizontal manner i.e. next to each other. There are various Menu Types in Semantic UI. In this article, we will know all about them briefly.

Semantic UI Menu Types:

Secondary Menu: It is used to create the secondary menu that can adjust its appearance to de-emphasize its contents. To create the secondary menu type, we will use the secondary class. We will use the anchor element to create the secondary menu list items.
Pointing Menu: It is used to create a relationship with nearby content.
Tabular Menu: Menu Tabular Type is used to display the items in tabular form to show the information in the tabs.
Text Menu: It is used to format any text content under the menu.
Vertical Menu: This type has the ability to make a menu vertical and display its elements stacked on one another.
Pagination Menu: This type has the ability that is used to format a pagination menu to present links to pages of content.

Syntax:

<div class="MenuType">
    Content
</div>

Example 1: This example describes the Semantic-UI Menu Types by creating the pointing type with displaying the element.

HTML

<html>

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body style="margin-inline: 10rem;">
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <h3>
            Semantic UI Menu Type
        </h3>
        <div class="ui pointing menu">
            <a class="item"> 
                <i class="book icon"></i> 
                Tutorials 
            </a>
            <a class="active item"> 
                <i class="tasks icon"></i>
               Jobs 
            </a>
            <a class="item"> 
                <i class="certificate icon"></i> 
                Certificate 
            </a>
            <a class="item"> 
                <i class="file alternate outline icon"></i>
                    Courses 
            </a>
            <div class="right menu">
                <div class="item">
                    <div class="ui transparent icon input">
                        <input type="text" 
                               placeholder="type here....">
                            <i class="search link icon"></i> 
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
</html>

Output:

Example 2: This example describes the uses of Semantic-UI Menu Tabular Type with more tabs.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Semantic-UI Menu Tabular Type</title>
    <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>

        <h3>Semantic-UI Menu Tabular Type</h3>

        <div class="ui tabular menu">
        <a class="item active">
            GFG1
        </a>
        <a class="item">
            GFG2
        </a>
        <a class="item">
            GFG3
        </a>
        <a class="item">
            GFG4
        </a>

        <div class="right menu">
            <div class="item">
                <div class="ui transparent icon input">
                <input type="text"
                        placeholder="Search here">
                <i class="search icon"></i>
                </div>
            </div>
            </div>
        </div>
    </div>
</body>
    
</html>

Output:

Example 3: The below example demonstrates the use of Semantic UI Menu Pagination Type.

HTML

<html>

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head>

<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <h3>
            Semantic UI Menu Type
        </h3>
        <div class="ui pagination menu"> 
            <a class="item" href="#">Prev</a> 
            <a class="active item">    a</a> 
            <a class="item">b</a> 
            <a class="item">c</a>
            <div class="disabled item"> ...... </div>
                <a class="item">y</a>
                <a class="item">z</a> 
                <a class="item" href="#">Next</a>
            </div>
    </center>
</body>
</html>