Semantic-UI Menu Pointing Type

Last Updated : 24 Mar, 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 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.

Semantic UI Menu offers us so many types as Menu, Secondary Menu, Tabular, Pointing, Text, Vertical Menu, Pagination. In this article, we will learn about pointing Menu Type along with examples.

Semantic UI Menu Pointing Type class:

pointing: This class is used to create a menu that shows a relationship to nearby content.

Syntax:

<div class="ui pointing menu">
    <a class="active item">
        ...
    </a>
    ...
</div>

Example 1: Below example demonstrates the use of Semantic UI Menu pointing Type.

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 Pointing Type 
        </h3> 
        <div class="ui pointing menu"> 
            <a class="item"> 
                Tutorials 
            </a> 
  
            <a class="active item"> 
                Jobs 
            </a> 
  
            <a class="item"> 
                Events 
            </a> 
  
            <a class="item"> 
                Courses 
            </a> 
        </div> 
        
        <div class="ui segment"> 
            <p></p> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Semantic UI Menu pointing Type.

Example 2: Below is another example that demonstrates the use of Semantic UI Menu pointing Type.

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 Pointing Type 
        </h3> 
        <div class="ui pointing menu"> 
            <a class="item"> 
                Tutorials 
            </a> 
  
            <a class="active item"> 
                Jobs 
            </a> 
  
            <a class="item"> 
                Events 
            </a> 
  
            <a class="item"> 
                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> 
  
        <div class="ui segment"> 
            <p></p> 
        </div> 
    </center> 
</body> 
  
</html>