Open In App

Semantic-UI | Breadcrumb

Last Updated : 20 May, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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. It uses a class to add CSS to the elements.

A Breadcrumb is used to show the hierarchy between content.

Example 1: This example creating a simple Breadcrumb.




<!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" />
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2>Breadcrumb</h2>
        <div class="ui breadcrumb">
            <a class="section">Home</a>
            <i class="right angle icon divider"></i>
            <a class="section">Data Structure</a>
            <i class="right angle icon divider"></i>
            <div class="active section">Link-List</div>
        </div>
        <br><br>
        <div class="ui breadcrumb">
            <a class="section">Home</a>
            <div class="divider"> / </div>
            <a class="section">Data Structure</a>
            <div class="divider"> / </div>
            <div class="active section">Link-List</div>
        </div>
    </div>
</body>
  
</html> 






                        








Output:




Example 2: Active and Disabled state in Breadcrumb.











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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" /> 


    <script src= 


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


    </script> 


</head> 


  


<body> 


    <div class="ui container"> 


        <h2>Active state Breadcrumb</h2> 


        <div class="ui breadcrumb"> 


            <a class="section">Web</a> 


            <div class="divider"> / </div> 


            <div class="active section"> 


                Bootstrap 


            </div> 


        </div> 


        <br><br> 


        <h2>Disabled state breadcrumb</h2> 


        <div class="ui breadcrumb"> 


            <a class="section">Web</a> 


            <div class="divider"> / </div> 


            <div class="disabled section"> 


                Semantic-UI 


            </div> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        








Output:




Example 3: Different Size of Breadcrumb.











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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" /> 


  


    <script src= 


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


    </script> 


</head> 


  


<body> 


    <div class="ui container"> 


        <h2>Breadcrumb</h2> 


        <div class="ui mini breadcrumb"> 


            <a class="section">Home</a> 


            <i class="right angle icon divider"></i> 


            <a class="section">Data Structure</a> 


            <i class="right angle icon divider"></i> 


            <div class="active section">Link-List</div> 


        </div> 


        <br><br> 


        <div class="ui small breadcrumb"> 


            <a class="section">Home</a> 


            <i class="right angle icon divider"></i> 


            <a class="section">Data Structure</a> 


            <i class="right angle icon divider"></i> 


            <div class="active section">Link-List</div> 


        </div> 


        <br><br> 


        <div class="ui large breadcrumb"> 


            <a class="section">Home</a> 


            <i class="right angle icon divider"></i> 


            <a class="section">Data Structure</a> 


            <i class="right angle icon divider"></i> 


            <div class="active section">Link-List</div> 


        </div> 


        <br><br> 


        <div class="ui huge breadcrumb"> 


            <a class="section">Home</a> 


            <i class="right angle icon divider"></i> 


            <a class="section">Data Structure</a> 


            <i class="right angle icon divider"></i> 


            <div class="active section">Link-List</div> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        








You can use any semantic-UI size class ‘massive’, ‘medium’.

Output:




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Step Variations
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Breadcrumb Types
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                React Suite Breadcrumb <Breadcrumb> Props
            

        
    
        
            

                ReactJS Semantic UI Breadcrumb Collections
            

        
    
        
            

                Semantic-UI Breadcrumb Variations
            

        
    
        
            

                Semantic-UI Breadcrumb States
            

        
    
        
            

                Semantic-UI Breadcrumb Content
            

        
    
        
            

                Semantic-UI Breadcrumb Types
            

        
    
        
            

                Semantic-UI Breadcrumb Size Variation
            

        
    
        
            

                Semantic-UI Breadcrumb Link Content
            

        
    
        
            

                Semantic-UI Breadcrumb Active State
            

        
    
        
            

                Semantic-UI Breadcrumb Divider Content
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
I

        

            
        

        

                                    


                                    

                                        iamsahil1910                                

                            

                            

            
                                

                            

                                                                    

                                        
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