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.
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.
The breadcrumb class is used in the nav tag and a few links are created by using the ul tag in the example below:
See online demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!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> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!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:
See online demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!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:
See online demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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:
See online demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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:
See online demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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> |
As mentioned earlier, you may use the icons in the Bulma breadcrumb component easily. The example below shows various font-awesome icons:
See online demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<!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> |