Bulma Breadcrumb Icons

Last Updated : 10 Feb, 2022

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 of your choice inside the <a> tag.

Bulma Breadcrumb Icons:

Breadcrumbs in Bulma are useful to indicate the current page’s location within a navigational hierarchy. Bulma provides a thousand plus Font Awesome icons that can be used with the breadcrumbs instead of having any specific classes.

Syntax:

<nav class="breadcrumb" aria-label="breadcrumbs">
    ...
    <span class="icon is-small">
        <i class="fas fa-home"></i>
    </span>
    ...        
</nav>

Example: The example below shows how to use icons along with breadcrumbs in Bulma.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Breadcrumbs Icons</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 
    <style> 
        .container.is-fluid { 
            margin-top: 25px; 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h1> 
    <p> 
        <b>Bulma Breadcrumbs Icons</b> 
    </p> 
  
    <div class="container is-fluid"> 
        <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>Home</span>  
                    </a> 
                </li> 
                <li> 
                    <a href="#"> 
                        <span class="icon is-small"> 
                            <i class="fas fa-list" 
                               aria-hidden="true"> 
                            </i> 
                        </span> 
                        <span>Data Structures</span> 
                    </a> 
                </li> 
                <li class="is-active"> 
                    <a href="#"> 
                        <span class="icon is-small"> 
                            <i class="fas fa-project-diagram" 
                               aria-hidden="true"> 
                            </i> 
                        </span>  
                        <span>Graph</span> 
                    </a> 
                </li> 
            </ul> 
        </nav> 
    </div> 
</body> 
  
</html>