Bootstrap Breadcrumb
Bootstrap 5 Breadcrumb simplifies website navigation by displaying a sequential path to the current page. It enhances user experience by visually indicating the hierarchical structure of the site, facilitating easy navigation as per Bootstrap 5 documentation.
Bootstrap 5 Breadcrumb
Term | Description |
---|---|
Breadcrumb Variables | Changes default values for the breadcrumb by customizing SCSS file of Bootstrap 5. |
Breadcrumb Dividers | Customizes the Bootstrap 5 breadcrumb divider using the --bs-breadcrumb-divider CSS property or the $breadcrumb-divider and $breadcrumb-divider-flipped Sass variables. |
Syntax:
<ol class="breadcrumb">
<li class="breadcrumb-item"> Content .. </li>
</ol>
Example 1: This example we are using Bootstrap 5 Breadcrumbs, aiding hierarchical navigation with clear links indicating the user’s position within the site’s structure.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Breadcrumbs</title>
<!-- Load Bootstrap -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
</head>
<body class="container">
<div>
<strong>Bootstrap 5 Breadcrumb</strong>
</div>
<br />
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active"
aria-current="page">w3wiki</li>
<li class="breadcrumb-item">HTML Tutorial</li>
<li class="breadcrumb-item">CSS Tutorial</li>
</ol>
</nav>
</div>
</body>
</html>
Output:
Example 2: This example we Bootstrap 5 Breadcrumbs for hierarchical navigation within a website, offering clear links to different sections or pages.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Breadcrumbs</title>
<!-- Load Bootstrap -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h3 class="text-success mt-4">
w3wiki Bootstrap 5 Breadcrumbs
</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="https://www.w3wiki.net/">
w3wiki
</a>
</li>
<li class="breadcrumb-item active"
aria-current="page">
Articles
</li>
</ol>
</nav>
</div>
</div>
</div>
</body>
</html>
Output: