Open In App

Semantic-UI Breadcrumb Variations

Last Updated : 22 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI offers a “Breadcrumb” component for users to display order or rank in content. There are different variations of breadcrumb in terms of size.

We will create a UI showing the different variations of breadcrumb. After creating this basic template you can work with different components of Semantic UI.

Semantic UI Breadcrumb Variations Class:

  • size: A breadcrumb can have different size classes as tiny, mini, small, large, big, huge and massive.

Syntax:

<div class="ui tiny breadcrumb">
     ....
</div>

Example: The following example demonstrates all the classes of breadcrumb size variations.

HTML




<!DOCTYPE html>
<html>
   <head>
      <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
      <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>
   </head>
   <body>
      <div class="ui mini breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Mini Breadcrumb</div>
      </div>
      <br/>
      <div class="ui small breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Small Breadcrumb</div>
      </div>
      <br/>
      <div class="ui large breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Large Breadcrumb</div>
      </div>
      <br/>
      <div class="ui huge breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section"> Huge Breadcrumb</div>
      </div>
      <br/>
      <div class="ui massive breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Massive Breadcrumb</div>
      </div>
   </body>
</html>
 






                        










Output:


Semantic-UI Breadcrumb Variations
Semantic-UI Breadcrumb Variations


Reference: https://semantic-ui.com/collections/breadcrumb.html


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Breadcrumb States
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI | Forms
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                React Suite Breadcrumb <Breadcrumb> Props
            

        
    
        
            

                Semantic-UI | Breadcrumb
            

        
    
        
            

                ReactJS Semantic UI Breadcrumb Collections
            

        
    
        
            

                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
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        namankedia                                

                            

                            

            
                                

                            

                                                                    

                                        
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