Open In App

Bootstrap 5 Breadcrumb Dividers

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Breadcrumb Dividers are created using the content property of the “::before” element. To customize the bootstrap 5 breadcrumb divider, the –bs-breadcrumb-divider custom CSS property or the $breadcrumb-divider and $breadcrumb-divider-flipped Sass variables can be used. A custom SVG can also be passed to the –bs-breadcrumb-divider property.

Bootstrap 5 Breadcrumb Dividers Classes:

  • breadcrumb: This class is used to create a breadcrumb.
  • breadcrumb-item: This class is used to create a breadcrumb item inside the breadcrumb.
  • active: This class can be used with the breadcrumb-item class to mark the breadcrumb item as active.

Syntax:

<div style='--bs-breadcrumb-divider: "@";'>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="...">...</a></li>        
        <li class="breadcrumb-item active">...</li>
        ...
    </ol>
</div>

 

Example 1: In this example, we used the –bs-breadcrumb-divider property to use the “# ” symbol as the breadcrumb divider.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container d-flex flex-column 
        align-items-center">
        <div class="mt-4 text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Breadcrumb Divider</strong>
        </div>
  
        <h5 class="mt-4">Default Breadcrumb Divider</h5>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="...">GeeksforGeeks</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="...">Practice</a>
                </li>
                <li class="breadcrumb-item active">
                    DSA
                </li>
            </ol>
        </div>
  
        <h5 class="mt-4">Custom Breadcrumb Divider</h5>
        <div style='--bs-breadcrumb-divider: "#";'>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="...">GeeksforGeeks</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="...">Practice</a>
                </li>
                <li class="breadcrumb-item active">
                    DSA
                </li>
            </ol>
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In the below example, we used the –bs-breadcrumb-divider property to use a custom SVG icon as the divider for our breadcrumb.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 - GeeksforGeeks</title>
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
  
    <!-- Bootstrap Javascript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="container d-flex flex-column 
        align-items-center">
        <div class="mt-4 text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Breadcrumb Divider</strong>
        </div>
  
        <h5 class="mt-4">SVG as Breadcrumb Divider</h5>
        <div style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 1 2' width='8px' height='12px' %3E%3Cpath d='M5 2 6 3 5 4 5 2Z' fill='%23000000'/%3E%3C/svg%3E");">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="...">GeeksforGeeks</a></li>
                <li class="breadcrumb-item">    
                    <a href="...">Practice</a></li>
                <li class="breadcrumb-item active">
                    DSA</li>
            </ol>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.2/components/breadcrumb/#dividers



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