Hit enter after type your search item

A little about Bulma breadcrumb

In order to improve the navigational experience for your users, you may use the breadcrumb component of the Bulma framework – quite easily.

The breadcrumb component allows you to use various separators e.g. forward slash, arrows, dots, etc. You may also use icons in breadcrumb content.

Similarly, you may set the size of breadcrumbs by using three available classes. All these are shown in the examples below.

How to use the breadcrumb component?

For creating a breadcrumb component, you need to use the breadcrumb container (a nav, for example) and a ul list. The dividers are automatically created.

A simple example of Bulma breadcrumb

The breadcrumb class is used in the nav tag and a few links are created by using the ul tag in the example below:

bulma breadcrumbs

See online demo and code

Aligning the breadcrumbs

As seen in the above example, the default alignment is left for the breadcrumbs. By using two built-in classes, you may set the alignment center or right. These classes are:

  • is-centered
  • is-right

The example below creates breadcrumb with right alignment:

See online demo and code

Setting the size example

Three additional classes are available to set the size of breadcrumbs in Bulma. These are:

  • is-small
  • is-medium
  • is-large

The example below shows breadcrumbs in all three sizes:

bulma breadcrumbs size

See online demo and code

The example of arrow separator

Rather than showing the forward-slash separator, you may set other available separators. For using the arrow separator, use the has-arrow-separator class as shown below:

breadcrumbs arrow

See online demo and code

Using the bullet separator example

Use the has-bullet-separator class for creating the breadcrumb with bullet separator:

breadcrumbs bullet

See online demo and code

The demo of dot separator

Similarly, you may use the has-dot-separator class for the dot operator as shown in the example below:

See online demo and code

Succeed separator example

For succeed separator, use the has-succeeds-separator class:

breadcrumbs succeed

See online demo and code

An example of the font-awesome icon in the breadcrumb

As mentioned earlier, you may use the icons in the Bulma breadcrumb component easily. The example below shows various font-awesome icons:

breadcrumbs icons

See online demo and code



This div height required for enabling the sticky sidebar