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=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</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:

Example 2: In this example, we will use the Bullet Separator.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet'
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</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:

Example 3: In this example, we will use the Dot Separator.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet' 
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</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:

Example 4: In this example, we will use the Succeeds Separator.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet' 
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</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:

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

Bulma Breadcrumb Alternative Separators

Explore