Bulma Breadcrumb Alternative Separators
Bulma Breadcrumb is a simple navigation component that can be used to navigate around pages. This can be used to see the page where a user is located currently and also go back to a previous page. In this article, we will learn about Breadcrumb Alternative Separators, that is used to separate these breadcrumbs.
Bulma Breadcrumb Alternative Separators Classes:
- has-arrow-separator: It is used to give arrow-like navigation to the components.
- has-bullet-separator: It is used to give bullet-like navigation to the components.
- has-dot-separator: It is used to give dot-like navigation to the components.
- has-succeeds-separator: It is used to give succeeds like navigation to the components.
Syntax:
<nav class="breadcrumb alternative-separator-class">
<ul>
......
</ul>
</nav>Example 1: In this example, we will use the Arrow Separator.
HTML
<!DOCTYPE html><html> <head> <link rel='stylesheet' href=</head><body> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Breadcrumb Alternative Separators</b><br><br> <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs"> <ul> <li class="is-active"> <a href="#">GeeksforGeeks</a> </li> <li><a href="#">Courses</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Jobs</a></li> </ul> </nav></body> </html> |
Output:
Bulma Breadcrumb Alternative Separators
Example 2: In this example, we will use the Bullet Separator.
HTML
<!DOCTYPE html><html> <head> <link rel='stylesheet' href=</head><body > <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Breadcrumb Alternative Separators</b> <br><br> <nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs"> <ul> <li class="is-active"> <a href="#">GeeksforGeeks</a> </li> <li><a href="#">Courses</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Jobs</a></li> </ul> </nav></body> </html> |
Output:
Bulma Breadcrumb Alternative Separators
Example 3: In this example, we will use the Dot Separator.
HTML
<!DOCTYPE html><html> <head> <link rel='stylesheet' href=</head><body > <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Breadcrumb Alternative Separators</b> <br><br> <nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs"> <ul> <li class="is-active"> <a href="#">GeeksforGeeks</a> </li> <li><a href="#">Courses</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Jobs</a></li> </ul> </nav></body> </html> |
Output:
Bulma Breadcrumb Alternative Separators
Example 4: In this example, we will use the Succeeds Separator.
HTML
<!DOCTYPE html><html> <head> <link rel='stylesheet' href=</head><body > <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Breadcrumb Alternative Separators</b> <br><br> <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"> <ul> <li class="is-active"> <a href="#">GeeksforGeeks</a> </li> <li><a href="#">Courses</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Jobs</a></li> </ul> </nav></body> </html> |
Output:
Bulma Breadcrumb Alternative Separators
Reference Link: https://bulma.io/documentation/components/breadcrumb/#alternative-separators
Please Login to comment...