How To Create a Breadcrumb Navigation Menu
Breadcrumb Navigation Menu
How To, for Web Application
By: Chrysanthus Date Published: 10 Apr 2025
A breadcrumb navigation order, provides hyperlinks back to each previous webpage, that the user navigated through, and shows the user's current location in a website. This tutorial explains how to produce that. The current location indicator is at the end of the breadcrumb navigation order. For the project in this tutorial, the location names are separated by the forward slash / .
For the project in this tutorial, how the path (location history) is obtained, is not explained. Only, how to display the path, is explained.
At the end of this tutorial, is the complete code for the webpage. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension .html . Open the saved file in the browser, to appreciate the look of the breadcrumb navigation path. If any of the hyperlinks is clicked, nothing will happen (no webpage will open), because the href values are dummy values. The reader is advised to do that, before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The webpage skeleton code, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Cascading Dropdown List for Forms with Select Elements using JavaScript</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage has at least the first four tags in the HTML head element above. There will be some code in the HTML style element. There will be no JavaScript. Remember that the code for the hyperlink is the anchor element. The HTML body element will have the anchor elements as contents of list elements in an unordered-list element.
The HTML body Element Content
The content for the body element is:
<h2>Breadcrumb</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>.
</ul>
There is an unordered-list element whose content is list elements. Each list element has an anchor element. The first location the user visited is Home, the second is Pictures, the third is Summer, and the fourth and current location is Italy. Note that Italy is not in an anchor element. This is because it is for the current webpage, and clicking it should have no effect.
The HTML Style Element
The style sheet in the head element is used to make the unordered list appear horizontal instead of vertical, at the browser.
Styling the Unordered Element
The CSS rule for the unordered element is:
ul.breadcrumb {
list-style: none;
padding: 10px 16px;
background-color: #eee;
}
"list-style: none;" means there should be no markers or bullets for any of the list elements. The top and bottom padding for the ul element (not the individual li elements) is 10px. The left and right padding for the ul element (not the individual li elements) is 16px. The background color for the whole ul element which includes the li elements, is #eee (light gray).
Styling the List (li) Elements
There are two CSS rules for the li elements. They are:
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
The first CSS rule here, makes each of the li elements an inline-level element. With that, the li elements will appear at the browser, horizontally instead of vertically. The CSS rule goes on to give any text as its content (including grand child), a font-size of 18px.
Note that the second CSS rule here, has "+li:before" in its selector. This creates an element just before the second, third, fourth, etc. li elements. Note that the first li element is not included. For each of the new before elements, the four padding is 8px; the text color is black and each has the single character code, "/\00a0" , which is the forward slash, / . Well, "\00a0" actually produces some space.
Styling Each Anchor Element
The content of each li element in the body element, is an anchor (a) element, which has the href attribute (and value). The CSS rule for this is:
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
The text color is "#0275d8;" (bluish) and no hyperlink is underlined.
Anchor Element On-hover
The CSS rule for the anchor element on-hover is:
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
When the mouse pointer goes over an anchor (a) element, the text color becomes "#01447e;" (dark blue). The text is also underlined on-hover.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumb</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
ul.breadcrumb {
list-style: none;
padding: 10px 16px;
background-color: #eee;
}
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Breadcrumb</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but with the extension .html . Open the saved file in the browser, to appreciate the look of the breadcrumb navigation path. If any of the hyperlinks is clicked, nothing will happen (no webpage will open), because the href values are dummy values.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
How to Create Pagination of Numbers with Borders
How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
How to Create a Vertical HTML Button Group with CSS
How To Create a Breadcrumb Navigation Menu
How to Create a Hover-able Dropup Menu with CSS Only
How to Create a Clickable Dropdown Menu with CSS and JavaScript
How to Create a Clickable Dropdown Menu inside a Responsive Navigation Sidebar with CSS and JavaScript
How to Create a Hover-able Dropdown Menu inside a Responsive Horizontal Navigation Bar with CSS and JavaScript
How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript