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 Breadcrumb
- Step 1: Assign the class
.breadcrumbto 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
activebreadcrumb item, assign.is-activemodifier 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>
Source Code
Download
<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>
Source Code : Output
Breadcrumb Alignment
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>
Source Code
Download
<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>
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>
Source Code
Download
<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>
Source Code : Output
Breadcrumb: Size
Bulma CSS provides three types of breadcrumb size such as small breadcrumb, medium breadcrumb & large breadcrumb.
Breadcrumb: Small Size
To create small 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>
Source Code
Download
<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>
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>
Source Code
Download
<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>
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>
Source Code
Download
<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>
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>
Source Code
Download
<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>
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>
Source Code
Download
<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>
Source Code : Output
Web Tutorials
