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
Last Updated :
30 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...