Open In App

Semantic-UI | Tab

Last Updated : 29 Dec, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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();

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        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>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
     
    <script>
        $('.menu .item').tab();                  
    </script>
</body>
 
</html>
 






                        










Output: 
 




 


Example: The following example demonstrates multiple tabs group.


 




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <title>Semantic UI</title>


    <link href=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


        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 contiguous 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>


    <script src="https://code.jquery.com/jquery-3.1.1.min.js"


        integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="


        crossorigin="anonymous">


    </script>


     


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


    </script>


     


    <script>


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


    </script>


</body>


 


</html>



















                        







                        










Output: 
 




 




                                    


                                                                        

                                        

                                            

                                                

                                                    
I

        

            
        

        

                                                

                                                

                                                    iamsahil1910                                                

                                            

                                            

            
                                        

                                        

                                            
    

        
        
    
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    



                            

                                                            

                                    
                                        
                                        Previous Article
                                    
                                    
                                    

                                        Semantic-UI Sticky Push
                                    

                                

                                                            

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        Semantic-UI Tab Types
                                    

                                

                                                        

                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
  
                        

                                                

                        
                                                    

                                
Similar Reads

                                

                                    
        
            

                
How to remove active nav-tab when click outside of nav-tab in Bootstrap ?

                
Bootstrap has the class called "collapse navbar-collapse" which collapses the navigation bar when the user changes the screen resolution. The java-script along-with it at the bottom of the code triggers the collapsed menu in such a way that when the user clicks the hamburger icon of the menu and navigates to the required link, it again collapses th

            

            
            

                
                2 min read
            

        
    
        
            

                
ReactJS Semantic UI Tab Module

                
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use Tab Module in ReactJS Semantic UI, Tab Module is used with a menu whose con

            

            
            

                
                3 min read
            

        
    
        
            

                
Semantic-UI Tab Loading State

                
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 offers a tab component for users to bundle up different categories of content, showing only one category of content at a ti

            

            
            

                
                3 min read
            

        
    
        
            

                
Semantic-UI Tab Active State

                
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 offers a Tab component for users to bundle up different categories of content, showing only one category of content at a ti

            

            
            

                
                3 min read
            

        
    
        
            

                
Semantic-UI Tab Types

                
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

            

            
            

                
                2 min read
            

        
    
        
            

                
Semantic-UI Tab States

                
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 offers a tab component for users to bundle up different categories of content, showing only one category of content at a ti

            

            
            

                
                4 min read
            

        
    
        
            

                
Difference between semantic and non-semantic elements

                
Semantic HTML elements: These elements simply mean, elements with meaning. The reason being, there definition in the code tells the browser and the developer what they are supposed to do. Framing in simpler words, these elements describe the type of content they are supposed to contain. Following is the list of some semantic elements : article asid

            

            
            

                
                2 min read
            

        
    
        
            

                
ReactJS Evergreen Tab Component

                
React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Tab Component allows the user to switch between components present in given different tabs. It is used for organizing our content in logical groups. We can use the following

            

            
            

                
                2 min read
            

        
    
        
            

                
CSS tab-size Property

                
The tab-size property in CSS is used to specify the width of the tab character. The tab-size usually displays a single space character in an HTML document. Some elements like &lt;textarea&gt; and &lt;pre&gt; elements display the tab-size. Syntax: tab-size: number|length|initial|inherit; Property Value: The value of tab-size property is listed below

            

            
            

                
                2 min read
            

        
    
        
            

                
How to Create a Tab Image Gallery ?

                
To create a tab image gallery you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, and CSS will make it looks good. This kind of tab image gallery looks attractive on a website. By using JavaScript you can easily change the displayed pictures from the gallery. Creating Structure: In the HTML section, we will create a

            

            
            

                
                2 min read
            

        
                                    

                                                                    
                                                            

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                




	
	
	

	
	

	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox