bulma breadcrumbs size

A little about Bulma breadcrumb

by

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
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

</head>




<body>

<div class="container">




<nav class="breadcrumb" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">Python</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Round</a></li>

  </ul>

</nav>




</div>   

</body>

</html>

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
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

</head>




<body>

<div class="container">




<nav class="breadcrumb is-right" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>




</div>   

</body>

</html>

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
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

</head>




<body>

<div class="container">




<nav class="breadcrumb is-small" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>




<nav class="breadcrumb is-medium" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>




<nav class="breadcrumb is-large" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>

</div>   

</body>

</html>

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
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

</head>




<body>

<div class="container">




<nav class="breadcrumb is-medium has-arrow-separator" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>







</div>   

</body>

</html>

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
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

</head>




<body>

<div class="container">




<nav class="breadcrumb is-medium has-bullet-separator" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>







</div>   

</body>

</html>

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
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

</head>




<body>

<div class="container">




<nav class="breadcrumb is-medium has-dot-separator" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>







</div>   

</body>

</html>

Succeed separator example

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

breadcrumbs succeed

See online demo and code
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

</head>




<body>

<div class="container">




<nav class="breadcrumb is-medium has-succeeds-separator" aria-label="breadcrumbs">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Functions</a></li>

    <li class="is-active"><a href="https://www.jquery-az.com/6-examples-use-python-round-function/" aria-current="page">Trim()</a></li>

  </ul>

</nav>







</div>   

</body>

</html>

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
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

</head>




<body>

<div class="container">




<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-book" aria-hidden="true"></i>

        </span>

        <span>JavaScript</span>

      </a>

    </li>

    <li>

      <a href="#">

        <span class="icon is-small">

          <i class="fas fa-puzzle-piece" aria-hidden="true"></i>

        </span>

        <span>Functions</span>

      </a>

    </li>

    <li class="is-active">

      <a href="#">

        <span class="icon is-small">

          <i class="fas fa-thumbs-up" aria-hidden="true"></i>

        </span>

        <span>Split()</span>

      </a>

    </li>

  </ul>

</nav>







</div>   

</body>

</html>