Semantic-UI Menu Tabular 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.

Semantic-UI Menu is used to display the grouped navigation menu. Menu Tabular Type is used to display the items in tabular form to show the information in the tabs. In this article, we will discuss Semantic-UI Menu Tabular Type.

Semantic-UI Menu Tabular Type Class:

tabular: This class is used to format menu to show tabular information.

Syntax:

<div class="ui tabular menu">
  ....
</div>

Example 1: This example describes the uses of Semantic-UI Menu Tabular Type.

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> 
        </div> 
    </div> 
</body> 
    
</html>

Output:

Semantic-UI Menu Tabular Type

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>