Bootstrap 5 Breadcrumb Dividers
Last Updated :
24 Jan, 2023
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 >
< link rel = "stylesheet" href =
< 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
Share your thoughts in the comments
Please Login to comment...