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.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
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.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
<!-- Bootstrap Javascript -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</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='https://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