Open In App

Bulma | Breadcrumb

Last Updated : 21 Jun, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
Bulma breadcrumb is a simple navigation component. The dividers between the nav links are automatically created when class ‘breadcrumb’ is added in the nav tag. It indicates the current page using the ‘is-active’ modifier in the li tag.

Example 1:




<html>
  <head>
    <title>Bulma Breadcrumb</title>
    <link rel='stylesheet' 
          href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
    <!-- custom css -->
    <style>
      ul{
        margin-top:24px
      }
  
    </style>
  </head>
  <body>
    <div class='container'>
      <div>
        <nav class="breadcrumb" aria-label="breadcrumbs">
          <ul>
            <li><a href="#">Home</a></li>
            <li class='is-active'>
                      <a href="#" aria-current="page">
                            Technologies
                      </a>
            </li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
          </ul>
        </nav>
    </div>
    </div>
  </body>
</html> 






                        








Output: 




Example 2:  Different alignment breadcrumb











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Breadcrumb</title> 


    <link rel='stylesheet'


          href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      .breadcrumb ul{ 


        margin-top:24px; 


      } 


  


      li.is-active a{ 


        color:white !important 


      } 


  


    </style> 


  </head> 


  <body> 


    <div> 


      <nav class="breadcrumb has-background-black" 


                  aria-label="breadcrumbs"> 


        <ul> 


          <li><a href="#">Home</a></li> 


          <li class='is-active'> 


                  <a href="#" aria-current="page"> 


                       Technologies 


                  </a> 


          </li> 


          <li><a href="#">Careers</a></li> 


          <li><a href="#">About us</a></li> 


          <li><a href="#">Contact us</a></li> 


        </ul> 


      </nav> 


    </div> 


  


    <div> 


      <nav class="breadcrumb is-centered has-background-black"


           aria-label="breadcrumbs"> 


        <ul> 


          <li><a href="#">Home</a></li> 


          <li class='is-active'> 


               <a href="#" aria-current="page"> 


                           Technologies 


               </a> 


          </li> 


          <li><a href="#">Careers</a></li> 


          <li><a href="#">About us</a></li> 


          <li><a href="#">Contact us</a></li> 


        </ul> 


      </nav> 


    </div> 


  


    <div> 


      <nav class="breadcrumb is-right has-background-black"


           aria-label="breadcrumbs"> 


        <ul> 


          <li><a href="#">Home</a></li> 


          <li class='is-active'> 


               <a href="#" aria-current="page"> 


                     Technologies 


               </a> 


          </li> 


          <li><a href="#">Careers</a></li> 


          <li><a href="#">About us</a></li> 


          <li><a href="#">Contact us</a></li> 


        </ul> 


      </nav> 


    </div> 


  </body> 


</html> 



















                        







                        








Output: 




Example 3: Different sizes breadcrumb











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Breadcrumb</title> 


    <link rel='stylesheet'


          href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      .breadcrumb ul{ 


        margin-top:24px; 


      } 


  


      li.is-active a{ 


        color:white !important 


      } 


  


    </style> 


  </head> 


  <body> 


    <div> 


      <nav class="breadcrumb is-small has-background-black" 


           aria-label="breadcrumbs"> 


        <ul> 


          <li><a href="#">Home</a></li> 


          <li class='is-active'> 


                <a href="#" aria-current="page">Technologies 


             </a></li> 


          <li><a href="#">Careers</a></li> 


          <li><a href="#">About us</a></li> 


          <li><a href="#">Contact us</a></li> 


        </ul> 


      </nav> 


    </div> 


  


    <div> 


      <nav class="breadcrumb is-medium has-background-black"


                aria-label="breadcrumbs"> 


        <ul> 


          <li><a href="#">Home</a></li> 


          <li class='is-active'> 


                <a href="#" aria-current="page"> 


                 Technologies</a></li> 


          <li><a href="#">Careers</a></li> 


          <li><a href="#">About us</a></li> 


          <li><a href="#">Contact us</a></li> 


        </ul> 


      </nav> 


    </div> 


  


    <div> 


      <nav class="breadcrumb is-large has-background-black"


           aria-label="breadcrumbs"> 


        <ul> 


          <li><a href="#">Home</a></li> 


          <li class='is-active'> 


                  <a href="#" aria-current="page"> 


             Technologies</a></li> 


          <li><a href="#">Careers</a></li> 


          <li><a href="#">About us</a></li> 


          <li><a href="#">Contact us</a></li> 


        </ul> 


      </nav> 


    </div> 


  </body> 


</html> 



















                        







                        








Output: 




Example 4:  Breadcrumb with icons











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Breadcrumb</title> 


    <link rel='stylesheet' 


          href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      .breadcrumb ul{ 


        margin-top:24px; 


      } 


  


      span{ 


        margin-right:2px; 


      } 


  


    </style> 


  </head> 


  <body> 


    <!-- font-awesome cdn -->


    <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


    </script> 


  


    <div> 


      <nav class="breadcrumb aria-label="breadcrumbs"> 


        <ul> 


          <li> 


            <a href="#"> 


              <span> 


                <i class="fas fa-home"


                    aria-hidden="true"></i> 


              </span> 


              <span>Home</span> 


            </a> 


          </li> 


            


          <li> 


            <a href="#"> 


              <span> 


                <i class="fas fa-music" 


                    aria-hidden="true"></i> 


              </span> 


              <span>Music</span> 


            </a> 


          </li> 


            


          <li> 


            <a href="#"> 


              <span> 


                <i class="fas fa-video-slash"


                    aria-hidden="true"></i> 


              </span> 


              <span>Videos</span> 


            </a> 


          </li> 


  


          <li> 


            <a href="#"> 


              <span> 


                <span> 


                  <i class="fas fa-link" 


                      aria-hidden="true"></i> 


                </span> 


              </span> 


              <span>Links</span> 


            </a> 


          </li> 


  


          <li class='is-active'> 


            <a href="#" aria-current="page"> 


              <span> 


                <span> 


                  <i class="fas fa-book" aria-hidden="true"></i> 


                </span> 


              </span> 


              <span>Documentation</span> 


            </a> 


          </li> 


  


        </ul> 


      </nav> 


    </div> 


  


  </body> 


</html> 



















                        







                        








Output: 




Example 5:  Different separators











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Breadcrumb</title> 


    <link rel='stylesheet'


          href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      .breadcrumb ul{ 


        margin-top:24px; 


      } 


  


      p{ 


        margin-top:24px; 


        margin-left:15px; 


      } 


  


      span{ 


        margin-right:2px; 


      } 


  


    </style> 


  </head> 


  <body> 


    <!-- font-awesome cdn -->


    <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


    </script> 


  


    <div class='columns'> 


      <div class='column is-3'> 


        <p><strong>Arrow Separator ---> </strong></p> 


      </div> 


      <div class='column is-8'> 


        <nav class="breadcrumb has-arrow-separator" 


             aria-label="breadcrumbs"> 


          <ul> 


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-home" 


                     aria-hidden="true"></i> 


                </span> 


                <span>Home</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-music" 


                     aria-hidden="true"></i> 


                </span> 


                <span>Music</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-video-slash" 


                     aria-hidden="true"></i> 


                </span> 


                <span>Videos</span> 


              </a> 


            </li> 


  


            <li> 


              <a href="#"> 


                <span> 


                  <span> 


                    <i class="fas fa-link"


                       aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Links</span> 


              </a> 


            </li> 


  


            <li class='is-active'> 


              <a href="#" aria-current="page"> 


                <span> 


                  <span> 


                    <i class="fas fa-book"


                       aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Documentation</span> 


              </a> 


            </li> 


  


          </ul> 


        </nav> 


      </div> 


    </div> 


  


    <div class='columns'> 


      <div class='column is-3'> 


        <p><strong>Bullet Separator ---> </strong></p> 


      </div> 


      <div class='column is-8'> 


        <nav class="breadcrumb has-bullet-separator" 


             aria-label="breadcrumbs"> 


          <ul> 


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-home" aria-hidden="true"></i> 


                </span> 


                <span>Home</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-music" 


                      aria-hidden="true"></i> 


                </span> 


                <span>Music</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-video-slash" 


                     aria-hidden="true"></i> 


                </span> 


                <span>Videos</span> 


              </a> 


            </li> 


  


            <li> 


              <a href="#"> 


                <span> 


                  <span> 


                    <i class="fas fa-link"


                        aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Links</span> 


              </a> 


            </li> 


  


            <li class='is-active'> 


              <a href="#" aria-current="page"> 


                <span> 


                  <span> 


                    <i class="fas fa-book" 


                       aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Documentation</span> 


              </a> 


            </li> 


  


          </ul> 


        </nav> 


      </div> 


    </div> 


  


    <div class="columns"> 


      <div class="column is-3"> 


        <p><strong>Dot Separator ---> </strong></p> 


      </div> 


      <div class='column is-8'> 


        <nav class="breadcrumb has-dot-separator" 


             aria-label="breadcrumbs"> 


          <ul> 


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-home" aria-hidden="true"></i> 


                </span> 


                <span>Home</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-music" aria-hidden="true"></i> 


                </span> 


                <span>Music</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-video-slash" aria-hidden="true"></i> 


                </span> 


                <span>Videos</span> 


              </a> 


            </li> 


  


            <li> 


              <a href="#"> 


                <span> 


                  <span> 


                    <i class="fas fa-link" aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Links</span> 


              </a> 


            </li> 


  


            <li class='is-active'> 


              <a href="#" aria-current="page"> 


                <span> 


                  <span> 


                    <i class="fas fa-book" aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Documentation</span> 


              </a> 


            </li> 


  


          </ul> 


        </nav> 


      </div> 


    </div> 


  


    <div class="columns"> 


      <div class="column is-3"> 


        <p><strong>Succeeds Separator ---> </strong></p> 


      </div> 


      <div class='column is-8'> 


        <nav class="breadcrumb has-succeeds-separator" 


             aria-label="breadcrumbs"> 


          <ul> 


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-home" aria-hidden="true"></i> 


                </span> 


                <span>Home</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-music" aria-hidden="true"></i> 


                </span> 


                <span>Music</span> 


              </a> 


            </li> 


              


            <li> 


              <a href="#"> 


                <span> 


                  <i class="fas fa-video-slash" aria-hidden="true"></i> 


                </span> 


                <span>Videos</span> 


              </a> 


            </li> 


  


            <li> 


              <a href="#"> 


                <span> 


                  <span> 


                    <i class="fas fa-link" aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Links</span> 


              </a> 


            </li> 


  


            <li class='is-active'> 


              <a href="#" aria-current="page"> 


                <span> 


                  <span> 


                    <i class="fas fa-book" aria-hidden="true"></i> 


                  </span> 


                </span> 


                <span>Documentation</span> 


              </a> 


            </li> 


  


          </ul> 


        </nav> 


      </div> 


    </div> 


  


  </body> 


</html> 



















                        







                        








Output: 




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Swiggy Interview Experience | Set 3 (For SDE-2)
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        What is Reactor Pattern in Node.js ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                React Suite Breadcrumb <Breadcrumb> Props
            

        
    
        
            

                Bulma Breadcrumb Alternative Separators
            

        
    
        
            

                Bulma Breadcrumb Sizes
            

        
    
        
            

                Bulma Breadcrumb Alignment
            

        
    
        
            

                Bulma Breadcrumb Icons
            

        
    
        
            

                Bulma Breadcrumb Variables
            

        
    
        
            

                Semantic-UI | Breadcrumb
            

        
    
        
            

                How to create a Breadcrumb Navigation ?
            

        
    
        
            

                ReactJS UI Ant Design Breadcrumb Component
            

        
    
        
            

                React Suite Breadcrumb Component
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        hunter__js                                

                            

                            

            
                                

                            

                                                                    

                                        
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