Skip to content
Related Articles

Related Articles

Semantic-UI Tab Types

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Mar, 2022
View Discussion
Improve Article
Save Article

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. Semantic-UI Tab is a hidden section of content that can be activated by clicking it. The hidden Tab can be visible using the active class. Only one tab content is visible at a time and we can create any number of tabs.  In this article, we will discuss Tab Type in Semantic-UI.

Semantic-UI Tab Types:

  • tab: This class is used to create the tab.

Syntax:

<div class="ui top attached tabular menu">
   ....
</div>
<div class="ui bottom attached tab segment">
   ....
</div>

Example 1:  The following code demonstrates the Semantic-UI Tab Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title>Semantic-UI Tab Type</title>
  <link href=
        rel="stylesheet"/>
</head>
  
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2>  
    <h3> Semantic-UI Tab Type </h3>
  </div> <br>
  
  <div class="ui top attached tabular menu">
    <div class="active item" 
         data-tab="tab1">
      GeeksforGeeks
    </div>
  </div>
    
  <div class="ui bottom attached active tab segment" 
        data-tab="tab1">
    <p>
      A Computer Science portal for geeks. 
      It contains well written, well thought and
      well explained computer science and articles.
    </p>
  </div>
</body>
</html>


Output:

Semantic-UI Tab Type

Semantic-UI Tab Type

Example 2: The following code demonstrates the Semantic-UI Tab Type using more tabs.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <link href=
        rel="stylesheet"/>
  <script src=
  </script>
  <script src=
  </script>
</head>
  
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2>  
    <h3> Semantic-UI Tab Type </h3>
  </div> <br>
  
  <div class="ui top attached tabular menu">
    <div class="active item"
         data-tab="tab1">
      Tab1
    </div>
    <div class="item"
         data-tab="tab2">
      Tab2
    </div>
    <div class="item" 
         data-tab="tab3">
      Tab3
    </div>
  </div>
  
  <div class="ui bottom attached active tab segment" 
       data-tab="tab1">
    <p>
      A Computer Science portal for geeks. 
    </p>
  
  </div>
  <div class="ui bottom attached tab segment" 
       data-tab="tab2">
    <p>
      GeeksforGeeks
    </p>
  
  </div>
  <div class="ui bottom attached tab segment" 
       data-tab="tab3">
    <p>
      GeeksforGeeks.org
    </p>
  </div>
  
  <script>
    $('.menu .item').tab();
  </script>
</body>
</html>


Output:

Semantic-UI Tab Type

Semantic-UI Tab Type

Reference: https://semantic-ui.com/modules/tab.html#tab


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!