Bootstrap Breadcrumb
Breadcrumb is a sequence of links that track the user where they are on websites and how far they are from the main page. Breadcrumbs help users to navigate through the page easily. It also helps to easily return to the previous pages. Breadcrumbs are usually found at the top of the web page just below the navigation bar.
Bootstrap provides an easy way to implement these breadcrumbs to the webpage. Bootstrap provides a page's location within a navigational hierarchy which automatically adds separators via CSS.
Example: Adding breadcrumbs using bootstrap 5
Use ordered or unordered list to add linked list items to create breadcrumbs. Here we have used the navbar to add breadcrumbs. Add aria-label="breadcrumb" within <nav> class to describe type of navigation. Add .breadcrumb class within <ol> tag for ordered list. Add .aria-current="page" to last item to indicate it as current page. For adding items extend <li> tag with .breadcrumb-item class. The .active is used for the active page within .breadcrumb-item class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<nav aria-label="breadcrumb">
<ol class="breadcrumb ">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">content</a></li>
<li class="breadcrumb-item active" aria-current="page">users</li>
</ol>
</nav>
</body>
</html>
Output:
Here is the output of the above program.
Example: Using divider for page separator
The forward slash (/ )in the breadcrumbs can be replaced with dividers by modifying CSS custom property to --bs-breadcrumb-divider. Here is an example to use a divider as a page separator.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb ">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">content</a></li>
<li class="breadcrumb-item active" aria-current="page">users</li>
</ol>
</nav>
</body>
</html>
Output:
Here is the output of the above program.
Example: Using icons in breadcrumbs
We can add icons to the breadcrumbs by using embedded SVG icons. We can apply it with custom CSS property. Add the URL of the icon to .--bs-breadcrumb-divider.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb ">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">content</a></li>
<li class="breadcrumb-item active" aria-current="page">users</li>
</ol>
</nav>
</body>
</html>
Output:
Here is the output of the above program
Example: Removing the divider from the breadcrumb
We can also remove the dividers of breadcrumb by setting --bs-breadcrumb-divider:' '. The empty string in CSS counts as a value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<nav style="--bs-breadcrumb-divider:''; " aria-label="breadcrumb">
<ol class="breadcrumb ">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">content</a></li>
<li class="breadcrumb-item active" aria-current="page">users</li>
</ol>
</nav>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
Bootstrap Breadcrumbs helps in the smooth navigation of websites with a large number of links. It enhances the accessibility between the links. Bootstrap also lets you customize breadcrumbs. You can add icons to the divider or simply remove the dividers from the breadcrumbs.
