Skip to content
Related Articles

Related Articles

Semantic-UI | Tab
  • Last Updated : 21 Jun, 2020

Semantic UI is an open-source framework that provides user-friendly tabs to create great user interfaces for websites. It is very much similar to bootstrap usages for creating amazing websites. It uses a class to add styles to different elements of the HTML page structure. A tab is a hidden section of content that can be viewed by clicking on it. You can have any number of tabs depending on the need.

Example: The following example demonstrates the use of semantic-UI tabs.

$('.menu .item').tab();
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Tabs</h2>
        <h2>Hello welcome to geeksforgeeks</h2>
        <div class="ui top attached tabular menu">
            <a class="active item" data-tab="first">Home</a>
            <a class="item" data-tab="second">What we do</a>
            <a class="item" data-tab="third">Jobs</a>
        </div>
  
        <div class="ui bottom attached 
            active tab segment" data-tab="first">
            Welcome to geeksforgeeks.
        </div>
  
        <div class="ui bottom attached 
            tab segment" data-tab="second">
            Provide tutorials for learning.
        </div>
  
        <div class="ui bottom attached 
            tab segment" data-tab="third">
            Email your resume at careers@geeksforgeeks.org
        </div>
    </div>
  
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
      
    <script>
        $('.menu .item').tab();                   
    </script>
</body>
  
</html>

chevron_right


Output:

Example: The following example demonstrates multiple tabs group.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
            class="ui container">
  
        <h2>Tabs</h2>
        <h2>Hello, welcome to geeksforgeeks</h2>
  
        <div id="context1">
            <div class="ui secondary menu">
                <a class="item" data-tab="first">
                    Data Structure
                </a>
                <a class="item active" data-tab=
                    "second">Web Programming
                </a>
  
                <a class="item" data-tab="third">
                    Basic Programming
                </a>
            </div>
  
            <div class="ui tab segment" data-tab="first">
                <div class="ui top attached tabular menu">
                    <a class="active item" data-tab=
                            "first/a">Array</a>
                    <a class="item" data-tab=
                            "first/b">Link-List</a>
                    <a class="item" data-tab=
                            "first/c">Tree</a>
                </div>
  
                <div class="ui bottom attached active tab 
                        segment" data-tab="first/a">
                    Collection of data under similar 
                    data type with contigious memory.
                </div>
  
                <div class="ui bottom attached tab 
                        segment" data-tab="first/b">
                    Collection of data with 
                    dynamic memory allocation
                </div>
                <div class="ui bottom attached 
                    tab segment" data-tab="first/c">
                    Tree like structure to store data
                </div>
            </div>
            <div class="ui tab segment active" 
                    data-tab="second">
                <div class="ui top attached 
                        tabular menu">
                    <a class="item" data-tab=
                            "second/a">Django</a>
                    <a class="item" data-tab=
                            "second/b">NodeJS</a>
                    <a class="item active" 
                        data-tab="second/c">Laraval</a>
                </div>
                <div class="ui bottom attached 
                    tab segment" data-tab="second/a">
                    Python Framework
                </div>
                <div class="ui bottom attached tab 
                    segment" data-tab="second/b">
                    JavaScript Framework
                </div>
                <div class="ui bottom attached tab 
                    segment active" data-tab="second/c">
                    PHP framework
                </div>
            </div>
            <div class="ui tab segment" data-tab="third">
                <div class="ui top attached tabular menu">
                    <a class="item" data-tab="third/a">C</a>
                    <a class="item" data-tab="third/b">C++</a>
                    <a class="item" data-tab="third/c">Java</a>
                </div>
                <div class="ui bottom attached tab
                        segment" data-tab="third/a">
                    The most basic programming language.
                </div>
                <div class="ui bottom attached tab 
                        segment" data-tab="third/b">
                    C language with object oriented feature
                </div>
                <div class="ui bottom attached tab 
                        segment" data-tab="third/c">
                    Java is most popular enterprise 
                    programming language.
                </div>
            </div>
        </div>
    </div>
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
      
    <script>
        $('.menu .item').tab();                   
    </script>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :