Open In App

Bulma Breadcrumb Alternative Separators

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

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

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

Bulma Breadcrumb Alternative Separators

Reference Link: https://bulma.io/documentation/components/breadcrumb/#alternative-separators



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads