Learn how to create breadcrumb navigation using HTML and Bootstrap in this step-by-step tutorial. Perfect for beginners and web developers.
Table of Contents
Breadcrumbs are a navigational aid used in user interfaces. They allow users to track their location within a website or app. The term "breadcrumb" comes from the fairy tale "Hansel and Gretel," where the characters leave a trail of breadcrumbs to find their way back home. In web design, breadcrumbs help users understand their current position and navigate to previous sections easily. This article will guide you through creating breadcrumb navigation using HTML and Bootstrap.
Benefits of Using Breadcrumb Navigation
Breadcrumbs improve the overall user experience by providing a clear path for navigation. They reduce the number of actions a user needs to take to return to a previous page. Breadcrumbs also enhance SEO by creating internal links that search engines can follow, improving the visibility of your website. Additionally, they make large websites easier to navigate by presenting a hierarchical structure. This helps users find what they're looking for quickly and efficiently. Implementing breadcrumbs is a simple yet effective way to improve both usability and SEO.
Best Practices for Breadcrumb Navigation
When implementing breadcrumbs, it’s important to follow best practices to ensure they are effective and user-friendly. Place breadcrumbs at the top of the page, just below the header, so they are easily visible. Use clear and concise labels for each breadcrumb link to avoid confusion. Make sure the breadcrumb trail accurately represents the structure of your site. Avoid using breadcrumbs as the primary navigation method; they should complement, not replace, your main navigation menu. Finally, ensure your breadcrumbs are accessible by using appropriate HTML attributes like aria-label and aria-current. These practices help create an intuitive and efficient navigation system for your users.
Source Code
Step 1 (HTML Code):
To start, you need a basic HTML structure. Create a <nav> element with the class breadcrumb to contain your breadcrumb links. Inside the <nav>, use an ordered list (<ol>) with list items (<li>) for each breadcrumb link. Let's break down the components of the code step-by-step:
Document Structure
1. DOCTYPE Declaration and HTML Tag:
<!DOCTYPE html> <html lang="en">
<!DOCTYPE html>: Declares the document type and version of HTML being used.<html lang="en">: The root element of the HTML document, with the language set to English.
2. Head Section:
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap Breadcrumb</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styles.css" /> </head>
<meta charset="UTF-8" />: Specifies the character encoding for the document.<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Ensures compatibility mode is disabled in Internet Explorer.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport to make the website responsive on all devices.<title>Bootstrap Breadcrumb</title>: Defines the title of the document.<link ...>: Links to external stylesheets:- Font Awesome for icons.
- Bootstrap for styling.
- A custom stylesheet styles.css.
3. Body Section:
<body>
<nav aria-label="Breadcrumb">
<ol class="d-flex gap-1 p-5" style="list-style:none">
<li>
<a href="#">
<span class="sr-only">Home</span>
<svg ...>...</svg>
</a>
</li>
<li>
<svg ...>...</svg>
</li>
<li>
<a href="#"> Category </a>
</li>
<li>
<svg ...>...</svg>
</li>
<li>
<span>Blogs</span>
</li>
</ol>
</nav>
</body>
<body>: The main content of the HTML document.<nav aria-label="Breadcrumb">: A navigation element with an ARIA label for accessibility.<ol class="d-flex gap-1 p-5" style="list-style:none">: An ordered list styled with Bootstrap classes for flexbox layout, gap, and padding. The list-style:none style removes the default list markers.<li>: Each list item within the breadcrumb.- The first
<li>contains a link to the home page, visually represented by an SVG icon (a house). - Between list items are SVG icons used as separators (right arrows).
- The third list item contains a link to "Category".
- The fifth list item is plain text "Blogs".
- The first
SVG Icons
1. Home Icon:
<svg xmlns="http://www.w3.org/2000/svg" class="h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/> </svg>
- Represents a house, indicating the "Home" link.
2. Arrow Icons:
<svg xmlns="http://www.w3.org/2000/svg" class="h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg>
- Represents right-pointing arrows used as separators between breadcrumb items.
Step 2 (CSS Code):
While Bootstrap provides a good starting point, you might want to customize the breadcrumb style to better match your website’s design. You can do this by adding your own CSS. For instance, you might want to change the color of the breadcrumb links or adjust the spacing. Here’s a detailed explanation of each part:
1. Importing Font
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
- This line imports the "Poppins" font family from Google Fonts with various font weights (400, 500, 600, 700, 800, 900). The display=swap parameter ensures a smooth transition while the font loads.
2. Body Styles
body {
font: 14px 'Poppins', sans-serif;
font-weight: normal;
font-style: normal;
line-height: 23px;
color: #727272;
}
font: 14px 'Poppins', sans-serif;: Sets the font family for the body to "Poppins" with a fallback to a generic sans-serif font. The font size is 14 pixels.font-weight: normal;: Sets the font weight to normal (equivalent to 400).font-style: normal;: Ensures the font style is normal, not italic or oblique.line-height: 23px;: Sets the line height to 23 pixels, controlling the space between lines of text.color: #727272;: Sets the text color to a shade of gray (#727272).
3. Class .h-4 Styles
.h-4 {
height: 1rem;
width: 1rem;
}
.h-4: Defines a class with the name h-4.height: 1rem;: Sets the height to 1 rem (relative to the font size of the root element).width: 1rem;: Sets the width to 1 rem (relative to the font size of the root element).
4. Anchor Tag (<a>) Styles
a {
outline: medium none !important;
color: #727272;
text-decoration: none;
}
a: Targets all anchor tags (<a>).outline: medium none !important;: Removes the default outline around anchor tags when they are focused or active, using the !important flag to ensure this style takes precedence over others.color: #727272;: Sets the text color of anchor tags to the same gray color used for the body text (#727272).text-decoration: none;: Removes the underline from anchor tags, making them appear without the default hyperlink underline.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
body {
font: 14px 'Poppins', sans-serif;
font-weight: normal;
font-style: normal;
line-height: 23px;
color: #727272;
}
.h-4{
height: 1rem;
width: 1rem;
}
a {
outline: medium none !important;
color: #727272;
text-decoration: none;
} Final Output:
See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.
Conclusion:
Breadcrumb navigation is a simple yet powerful tool that enhances user experience and improves website navigation. By implementing breadcrumbs using HTML and Bootstrap, you can create a clear, hierarchical path that helps users understand their location within your site and easily navigate back to previous sections. The benefits of breadcrumbs include improved usability, better SEO, and a more structured website. With Bootstrap's styling capabilities and the option for custom CSS, you can design breadcrumbs that fit seamlessly with your site's aesthetics. Following best practices ensures that your breadcrumb navigation is both effective and accessible, providing a better experience for all users. Start incorporating breadcrumbs into your web design to make your site more user-friendly and organized.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
