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
Output:
Example 2: Different alignment breadcrumb
html
Output:
Example 3: Different sizes breadcrumb
html
Output:
Example 4: Breadcrumb with icons
html
Output:
Example 5: Different separators
html
Output:
<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>
<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>
<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>
<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>
<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>
