Description
A Bootstrap Breadcrumb is similar to the pagination element used to make website navigation easier and specifies the current page location to the user. The class .breadcrumb can be used for breadcrumb navigation.
Examples
In the below example, the breadcrumb navigation has been given in <ul> element and the current page is "Vacation", which was decided by making the <ul> elements <li> as active.
[html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Breadcrumbs</h2>
<p>The .breadcrumb class indicates the current page location within a navigational hierarchy:</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
</div>
</body>
</html>
[/html]
Output:
Key Points
- Bootstrap Breadcrumb makes the page navigation easy.
- To show the current page, the class .active has to be used.