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: 






                                    


                                                                        

                                        

                                            

                                                

                                                    
author
        

            
        

        

                                                

                                                

                                                    hunter__js                                                

                                            

                                            

            
                                        

                                        

                                            
    

        
        
    
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    



                            

                                                            

                                    
                                        
                                        Previous Article
                                    
                                    
                                    

                                        Ranger - A CLI File Manager
                                    

                                

                                                            

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        What is Reactor Pattern in Node.js ?
                                    

                                

                                                        

                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
  
                        

                                                

                        
                                                    

                                
Similar Reads

                                

                                    
        
            

                
React Suite Breadcrumb &lt;Breadcrumb&gt; Props

                
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Breadcrumb component allows the user to display the current page path and that too within a navigational hierarchy. There are different props for each breadcrumb item for the user to design the path hierarchy.

            

            
            

                
                3 min read
            

        
    
        
            

                
Bulma Breadcrumb Alternative Separators

                
Bulma Breadcrumb is a simple navigation component that can be used to navigate around pages. This can be used to see the page where a user is located currently and also go back to a previous page. In this article, we will learn about Breadcrumb Alternative Separators, that is used to separate these breadcrumbs. Bulma Breadcrumb Alternative Separato

            

            
            

                
                2 min read
            

        
    
        
            

                
Bulma Breadcrumb Sizes

                
Bulma is a free and 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. In Bulma, a breadcrumb is a simple navigation component. To navigate the component, we only require a breadcrumb container and a ul list. In this article,

            

            
            

                
                2 min read
            

        
    
        
            

                
Bulma Breadcrumb Alignment

                
Bulma is a free and 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. In Bulma, a Breadcrumb is a simple navigation component. To navigate the component we only require a breadcrumb container and a ul list. In this article, w

            

            
            

                
                2 min read
            

        
    
        
            

                
Bulma Breadcrumb Icons

                
Bulma is a modern CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites faster. In this article, we will be seeing how to add the icons to the breadcrumb in Bulma. To add icons to the breadcrumbs, you just have to add an icon container containing the Font Awesome icon

            

            
            

                
                2 min read
            

        
    
        
            

                
Bulma Breadcrumb Variables

                
Bulma is a free and 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. In Bulma, a breadcrumb is a simple navigation component. To navigate the component, we only require a breadcrumb container and a ul list. Variable Used: Va

            

            
            

                
                2 min read
            

        
    
        
            

                
Semantic-UI | Breadcrumb

                
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 creatin

            

            
            

                
                2 min read
            

        
    
        
            

                
How to create a Breadcrumb Navigation ?

                
In this article, we will learn how to create breadcrumbs navigation. Breadcrumb navigation is a website navigation scheme that visually represents the user's path from the homepage to the current page. It typically appears as a horizontal trail of links, showing the hierarchical structure of pages. Breadcrumbs aid in easy navigation and provide con

            

            
            

                
                2 min read
            

        
    
        
            

                
ReactJS UI Ant Design Breadcrumb Component

                
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Breadcrumb Component provides a way to indicate the location of the current page. We can use the following approach in ReactJS to use the Ant Design Breadcrumb Component. Syntax: &lt;Breadcrumb&gt; &lt;Breadcrumb.Item&gt; Content &lt;/Breadcrumb.Item&gt; &lt;

            

            
            

                
                2 min read
            

        
    
        
            

                
React Suite Breadcrumb Component

                
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Breadcrumb component allows the user to display the current page path and that too within a navigational hierarchy. We can use the following approach in ReactJS to use the React Suite Breadcrumb Component. Bread

            

            
            

                
                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