How to create a Breadcrumb Navigation ?
In this article, we will learn how to create breadcrumbs navigation. Breadcrumbs are a secondary navigation aid that helps users easily navigate through a website. Breadcrumbs provide you an orientation and show you exactly where you are within the website’s hierarchy.
Approach 1: We will follow the below steps for creating breadcrumbs using only CSS. This method allows to exactly customize how the breadcrumbs would look like.
Step 1: Create an HTML list of the navigation links.
<ul class="breadcrumb-navigation">
<li><a href="home">Home</a></li>
<li><a href="webdev">Web Development</a></li>
<li><a href="frontenddev">Frontend Development</a></li>
<li>JavaScript</li>
</ul>Step 2: Set the CSS display: inline in order to show the list in the same line.
.breadcrumb-navigation > li {
display: inline;
}
Step 3: Add a separator after every list element.
.breadcrumb-navigation li + li:before {
padding: 4px;
content: "/";
}Example:
HTML
<!DOCTYPE html><html> <head> <style> .breadcrumb-navigation { padding: 10px 18px; background-color: rgb(238, 238, 238); } .breadcrumb-navigation>li { display: inline; } .breadcrumb-navigation>li>a { color: #026ece; text-decoration: none; } .breadcrumb-navigation>li>a:hover { color: #6fc302; text-decoration: underline; } .breadcrumb-navigation li+li:before { padding: 4px; content: "/"; } </style></head> <body> <h1 style="color: green">GeeksforGeeks</h1> <ul class="breadcrumb-navigation"> <li> <a href="home"> Home </a> </li> <li> <a href="webdev"> Web Development </a> </li> <li> <a href="frontenddev"> Frontend Development </a> </li> <li>JavaScript</li> </ul></body> </html> |
Output:
Approach 2: We will follow the below steps for creating breadcrumbs using the Bootstrap library. This allows one to quickly create good-looking breadcrumbs.
Step 1: We simply add aria-label=”breadcrumb” to the nav element.
<nav aria-label="breadcrumb">
Step 2: We next add class=”breadcrumb-item” in the list elements.
<li class="breadcrumb-item"><a href="#">
Home
</a></li>Step 3: Add class=”breadcrumb-item active” in the current list element.
<li class="breadcrumb-item active" aria-current="page">
JavaScript
</li>Example:
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" href=</head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="home">Home</a> </li> <li class="breadcrumb-item"> <a href="webdev">Web Development</a> </li> <li class="breadcrumb-item"> <a href="frontenddev"> Frontend Development </a> </li> <li class="breadcrumb-item active" aria-current="page"> JavaScript </li> </ol> </nav></body> </html> |
Output:
Please Login to comment...