A breadcrumb is navigation feature which reveals the users navigation path in a website or web application. Breadcrumbs typically appear horizontally near the top of a webpage. We use breadcrumb navigation for large web sites that have hierarchically arranged pages.
A web site breaks the site into links of categories and sub categories which allows major categories of information to be linked in sequential order. Breadcrumb navigation is displayed to the user, so that they can easily see exactly where that web page is located within the web site. Breadcrumbs provide links to each previous page that navigates through in order to get to the current page.
We can create breadcrumb by using the class .breadcrumb with an unordered list in Bootstrap.
also read:
The below example shows the technique used for implementing the breadcrumbs in Bootstrap. If you have any questions about bootstrap breadcrumbs, please write it in the comments section.
Bootstrap Breadcrumbs Example
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Breakcrumbs Example</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="active">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</div>
</body>
</html>
[/code]
The above script uses the class .breadcrumb for creating breadcrumbs in a web site or web application. After executing the script, we will see separator added automatically before the content. Separators are automatically added in CSS through :before and content.
Leave a Reply