Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating Breadcrumbs navigation using HTML and CSS
Breadcrumbs is a useful navigation tool that displays the user's current location within a website. They provide a clear path for users to easily navigate back to previously visited pages, and they also help search engines understand the structure of your website.
Approach - 1
We will create horizontal breadcrumb navigation, which shows users the path they have taken to arrive at the current page.
This type of navigation helps users understand where they are on a website and how to navigate back to previous pages.
Algorithm
Define an unordered list element to hold the breadcrumbs.
Add list items for each breadcrumb and wrap them in anchor tags to make them clickable.
Use CSS to remove bullet points from the list and remove default margin and padding.
Then, use Flexbox to align the list items horizontally.
Add space between the separator and breadcrumb using the margin property.
Change the separator colour using the colour property.
Change the colour of the last breadcrumb using the colour property and disable its link using the pointer-events property.
Change the colour of the breadcrumb links using the colour property and remove the underline using the text-decoration property.
Add underline to breadcrumb links on hover using the text-decoration property.
Example
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumbs Example</title>
<!-- Add styling for breadcrumbs -->
<style>
nav ul {
list-style: none; /* Remove bullet points from list */
margin: 0;
padding: 0;
display: flex; /* Use flexbox to align items horizontally */
}
nav li:not(:last-child)::after {
content: "/"; /* Separate the breadcrumbs */
margin: 0 10px; /* Add space between separator and breadcrumb */
color: #999; /* Change separator color */
}
nav li:last-child {
color: #333; /* Change color of last breadcrumb */
pointer-events: none; /* Disable link for last breadcrumb */
}
nav a {
color: #2196e4; /* Change color of breadcrumb links */
text-decoration: none; /* Removes underline */
}
nav a:hover {
text-decoration: underline; /* Add underline to link on hover */
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<!-- Add breadcrumb navigation -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Subcategory</a></li>
<li>Page Name</li>
</ul>
</nav>
</body>
</html>
Approach - 2
Here, we will create vertical breadcrumb navigation to show the path taken to arrive at the current page.
Algorithm
Define a nav element to hold the breadcrumb links.
Make an unordered list with the ul tag.
For each breadcrumb link, create a list item using the li tag.
If the breadcrumb link is clickable, use the anchor tag.
If the breadcrumb link is not clickable, use plain text within the li tag.
Use CSS styles to customize the appearance of the breadcrumb links, including colour, text decoration, and any other desired styles.
Use the display property with a value of flex to align the breadcrumb links vertically, and use flex-direction with a value of the column to stack them vertically.
Optionally, use align-items to align the links to the left or right side of the nav element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Vertical Breadcrumb Navigation Example</title>
<style>
/* Style the nav container */
nav {
display: flex;
flex-direction: column; /* Align the links vertically */
align-items: flex-start; /* Align the links to the left */
}
/* Style the unordered list */
nav ul {
list-style: none; /* Remove bullet points */
margin: 0;
padding: 0;
}
/* Add separator between breadcrumb links */
nav li:not(:last-child)::after {
content: ">"; /* Add “>” as separator */
margin: 0 10px; /* Add some margin for spacing */
color: #999; /* Use a light gray color */
}
/* Style the last breadcrumb link */
nav li:last-child {
color: #333; /* Use a dark gray color */
pointer-events: none; /* Disable link behavior */
}
/* Style the breadcrumb links */
nav a {
color: #2196e4; /* Use a blue color */
text-decoration: none; /* Remove underline */
}
/* Style the breadcrumb links on hover */
nav a:hover {
text-decoration: underline; /* Add underline on hover */
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Subcategory</a></li>
<li>Page Name</li>
</ul>
</nav>
</body>
</html>
Conclusion
Breadcrumbs are often used on e-commerce websites to help customers easily navigate through product categories and subcategories. It can be useful on news websites where articles are categorized into topics and subtopics. It aids the readers to easily navigate to related articles or topics within the same category. They are also useful in web applications where users navigate through multiple pages or sections.
515 Views
