Bulma Breadcrumbs

Bulma breadcrumbs are a simple navigation component that specifies the steps through which the user navigates to the current page of the website.

Basic Steps To Create Bulma Breadcrumb

  • Step 1: Assign the class .breadcrumb to the breadcrumb container such i.e (<nav>) element base class.
  • Step 2: Create list element using list container i.e (<ul>) and child element i.e (<li>).
  • Step 3: To make active breadcrumb item, assign .is-active modifier class to the <li> element base class.

Example

General Syntax

      
        <nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
      <li><a href="#">List Item</a></li>
  </ul>
</nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Web design</a></li>
    <li><a href="#">App Design</a></li>
    <li><a href="#">Graphics Design</a></li>
    <li class="is-active"><a href="#" aria-current="page">Web Development</a></li>
  </ul>
</nav>          
        
Try it now

Source Code : Output

Breadcrumb Alignment

Bulma breadcrumb is aligned left direction by default, but its alignment direction can be changed either in the center or right direction using .is-centred & .is-right modifier class correspondingly.

Breadcrumb Alignment: Center

To align breadcrumb center, assign .is-centered modifier class to the breadcrumb container i.e (<nav>) element base class.

Example

General Syntax

      
        <nav class="breadcrumb is-centered" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Breadcrumb Item</a></li>
  </ul>
</nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb is-centered" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">sudhakarinfotech</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">css3</a></li>
    <li class="is-active"><a href="#" aria-current="page">JS</a></li>
  </ul>
</nav>          
        
Try it now

Source Code : Output

Breadcrumb: Right Alignment

To align breadcrumb right, assign .is-right modifier class to the breadcrumb container i.e (<nav>) element base class.

Example

General Syntax

      
        <nav class="breadcrumb is-right" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Breadcrumb Item</a></li>
  </ul>
</nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb is-right" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">sudhakarinfotech</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">jQuery</a></li>
    <li class="is-active"><a href="#" aria-current="page">JSON</a></li>
  </ul>
</nav>          
        
Try it now

Source Code : Output

Breadcrumb: Size

There are mainly three types of size classes available in Bulma breadcrumb. You can make small, medium, and large size of breadcrumb using the given classes.

Bulma Breadcrumb Sizes Classes:

  • is-small: It is used to make small size breadcrumb.
  • is-medium: It is used to make medium size breadcrumb.
  • is-large: It is used to make large size breadcrumb.

Breadcrumb: Small Size

To create small size breadcrumb, assign .is-small modifier class to the breadcrumb container i. e <nav> element base class.

Example

General Syntax

      
        <nav class="breadcrumb is-small" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Breadcrumb Item</a></li>
  </ul>
</nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb is-small" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">sudhakarinfotech</a></li>
    <li><a href="#">Ajax</a></li>
    <li><a href="#">Php</a></li>
    <li class="is-active"><a href="#" aria-current="page">MySQL</a></li>
  </ul>
</nav>          
        
Try it now

Source Code : Output

Breadcrumb: Medium Size

To create small breadcrumb, assign .is-medium modifier class to the breadcrumb container i.e <nav> element base class.

Example

General Syntax

      
        <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Breadcrumb Item</a></li>
  </ul>
</nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">sudhakarinfotech</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">JSON</a></li>
    <li class="is-active"><a href="#" aria-current="page">Jquery</a></li>
  </ul>
</nav>          
        
Try it now

Source Code : Output

Large Breadcrumb

To create small breadcrumb, assign .is-large modifier class to the breadcrumb container i. e <nav> element base class.

Example

General Syntax

      
        <nav class="breadcrumb is-large" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Breadcrumb Item</a></li>
  </ul>
</nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb is-large" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">sudhakarinfotech</a></li>
    <li><a href="#">Ajax</a></li>
    <li><a href="#">PHP</a></li>
    <li class="is-active"><a href="#" aria-current="page">MySQL</a></li>
  </ul>
</nav>          
        
Try it now

Source Code : Output

Breadcrumb With Icons

Breadcrumb can also use Font Awesome icons. Let us understand it using an example.

General Syntax

      
        <nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-home" aria-hidden="true"></i>
        </span>
        <span>Breadcrumb Item</span>
      </a>
    </li>
    </ul>
 </nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-home" aria-hidden="true"></i>
        </span>
        <span>Bulma</span>
      </a>
    </li>

    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        <span>Documentation</span>
      </a>
    </li>

    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
        </span>
        <span>Components</span>
      </a>
    </li>
    
   </ul>
</nav>          
        
Try it now

Source Code : Output

Breadcrumb separators

Bulma provides following breadcrumb separators: has-arrow-separator, has-bullet-separator, has-dot-separator, has-succeeds-separator.

Example

General Syntax

      
        <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Breadcrumb Item</a></li>
  </ul>
</nav>      
    
Try it now

Source Code

          
            <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">sudhakarinfotech</a></li>
    <li><a href="#">ES6</a></li>
    <li><a href="#">Ajax</a></li>
    <li class="is-active"><a href="#" aria-current="page">JSON</a></li>
  </ul>
</nav>          
        
Try it now

Source Code : Output

Web Tutorials
Bulma Breadcrumbs
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4