Skip to content
Related Articles

Related Articles

Bulma | Breadcrumb
  • Last Updated : 21 Jun, 2020

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=
    <!-- 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=
    <!-- 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=
    <!-- 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=
    <!-- custom css -->
    <style>
      .breadcrumb ul{
        margin-top:24px;
      }
  
      span{
        margin-right:2px;
      }
  
    </style>
  </head>
  <body>
    <!-- font-awesome cdn -->
    <script src=
    </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=
    <!-- 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=
    </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:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :