Semantic-UI Menu Text Type

Last Updated : 17 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 best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

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. In this article, we will discuss Semantic UI Menu Text Type. It is used to format any text content under the menu.

Semantic UI Menu Text Type Class:

text: This class is used to format a menu text content.

Syntax:

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

Example 1: Below is the example code that demonstrates the use of Semantic UI Menu Text Type.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Semantic UI Menu text Type</title> 
    
  <link rel="stylesheet"
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</head> 
  
<body style="margin-inline: 10px;"> 
    <br> 
    <h1>GeeksforGeeks</h1> 
    <strong>Semantic UI Menu text Type</strong> 
    <br><br> 
  
    <div class="ui text menu"> 
        <div class="header item">GeeksforGeeks</div> 
        <a class="item"> 
            Tutorials 
        </a> 
        <a class="active item"> 
            Jobs 
        </a> 
        <a class="item"> 
            Events 
        </a> 
        <a class="item"> 
            Courses 
        </a> 
    </div> 
</body> 
  
</html>

Output:

Semantic-UI Menu Text Type

Example 2: Below is another example code that demonstrates the use of Semantic UI Menu Text Type using link.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Semantic UI Menu text Type</title> 
  <link rel="stylesheet"
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</head> 
  
<body style="margin-inline: 10px;"> 
    <br> 
    <h1>GeeksforGeeks</h1> 
    <strong>Semantic UI Menu text Type</strong> 
    <br><br> 
  
    <div class="ui text menu"> 
        <div class="header item"> 
          GeeksforGeeks 
        </div> 
        <a class="item"
           href= 
"https://www.geeksforgeeks.org/array-data-structure/?ref=ghm"> 
            Tutorials 
        </a> 
        <a class="active item" 
           href= 
"https://practice.geeksforgeeks.org/jobs?ref=ghm"> 
            Jobs 
        </a> 
        <a class="item"
           href= 
"https://practice.geeksforgeeks.org/events/?ref=ghm"> 
            Events 
        </a> 
        <a class="item" 
           href= 
"https://www.geeksforgeeks.org/courses?ref=ghm"> 
            Courses 
        </a> 
    </div> 
</body> 
  
</html>