PUBLISHED ON: JUNE 9, 2021
How to create Breadcrumbs in Bootstrap 5
The Bootstrap Breadcrumbs are used to show the current location of the webpage within the navigational hierarchy. The links are usually separated by separators. Breadcrumbs are usually found at the top of the web page just below the navigation bar and allow you to easily navigate back to the main page through the links.
Example: Adding breadcrumbs using bootstrap 5
Use ordered or unordered lists 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.
- .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 "/" in the breadcrumbs can be replaced with dividers by modifying the 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.
