Breadcrumb with Icons

Elevate user experience by incorporating icons into your website's breadcrumbs using HTML and CSS. Guide users effortlessly through your site with visually appealing navigation cues.

Preview
Code

<ul class="breadcrumb">
  <li class="breadcrumb-item"><span class="lnr lnr-home"></span><a href="#">Home</a></li>
  <li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span><a href="#">Category</a></li>
  <li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span><a href="#">Subcategory</a></li>
  <li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span>Current Page</li>
</ul>

.breadcrumb {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  font-size: 16px;
  color: #333;
}

.breadcrumb-item:last-child {
  color: #777;
}

.breadcrumb-item:last-child:hover {
  cursor: default;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
  margin-left: 5px;
}

.breadcrumb-item a:hover {
  color: #0056b3;
}

.breadcrumb-item span {
  margin-right: 5px;
  font-weight: 600;
}

@media screen and (max-width: 600px) {
  .breadcrumb-item {
    margin: 5px;
    font-size: 14px;
  }
}

```
No need of JavaScript
```

Introducing our Breadcrumb with Icons UI Component, a sophisticated solution for enhancing navigation on your HTML and CSS website. This component combines the functionality of traditional breadcrumbs with the visual appeal of icons, offering users a clear and intuitive path to navigate through your site’s content hierarchy.

Breadcrumbs with icons not only improve usability but also add a touch of elegance to your website's design. Icons help users quickly identify sections and categories, making navigation more intuitive and visually engaging.

Key Features:

Icon Integration: Easily incorporate icons alongside text in your breadcrumb trails, enhancing visual appeal and aiding quick recognition of navigation paths.
Customizable Styles: Adjust the appearance of your breadcrumbs with flexible CSS options, including icon size, color, spacing, and typography to match your website's branding.
Responsive Design: Ensure your breadcrumb navigation looks great on all devices, from desktops to smartphones, with a layout that adapts smoothly to different screen sizes.
Enhanced Usability: Improve user experience by providing clear, easily navigable breadcrumb trails that help users understand their location and navigate your site efficiently.
SEO-Friendly: Boost your website’s search engine optimization with structured breadcrumb navigation, aiding search engines in understanding your site's content hierarchy.

Integrating our Breadcrumb with Icons UI Component into your HTML and CSS website is straightforward and requires minimal setup. Enhance your site’s navigation, improve user experience, and add a touch of elegance with visually appealing breadcrumb trails that guide users through your content seamlessly.

Steps to Copy the Code

Our step-by-step guide will walk you through the process of implementing a breadcrumb navigation with icons that enhances usability and aesthetics. Follow these clear instructions to create a visually appealing breadcrumb trail that seamlessly integrates with your website's design.

Step 1: Copy the Code Snippet

Start by copying the HTML and CSS code snippet provided above. This snippet includes the structure and styles necessary for the breadcrumb component with icons. Simply select the code, click the copy button and the code will be copied to your clipboard.

Step 2: Link CSS and JS Files

Ensure that you link the CSS and JavaScript files correctly in your HTML document. Place the CSS code inside a <style> tag in the <head> section of your HTML file, or link an external CSS file using the <link> tag. If your breadcrumb includes interactive elements that require JavaScript, include the JavaScript code either inline or by linking an external JavaScript file.

Step 3: Make it Yours

Personalize the breadcrumb component with icons to align with your website's design and branding. You can adjust the colors, sizes, fonts, and other properties defined in the CSS code to create a custom look for your breadcrumb trail. Additionally, you can choose different icons to represent various levels of navigation, enhancing the visual appeal and usability of your breadcrumb.

By following these straightforward steps, you can easily create stylish breadcrumb navigation with icons using HTML and CSS, enhancing the overall user experience and navigation flow of your website. Make the breadcrumb trail your own by customizing it to suit your specific design preferences and requirements.

Code Explanation

HTML Code

Unordered List (`<ul>`) with Class "breadcrumb":

<ul class="breadcrumb">

<ul>: This is an unordered list element, used to create a list of items without any specific order.
class="breadcrumb": The breadcrumb class is applied to the <ul> element, indicating that this list represents breadcrumb navigation.

List Items (`<li>`) with Class "breadcrumb-item":

<li class="breadcrumb-item"><span class="lnr lnr-home"></span><a href="#">Home</a></li>
<li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span><a href="#">Category</a></li>
<li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span><a href="#">Subcategory</a></li>
<li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span>Current Page</li>

<li>: These are list item elements, which are part of the <ul> list.
class="breadcrumb-item": The breadcrumb-item class is applied to each <li> element, styling them to fit the breadcrumb navigation style.

Icons (`<span>` elements) with Class "lnr lnr-*":

<span class="lnr lnr-home"></span>
<span class="lnr lnr-chevron-right"></span>
<span>: This is an inline element used to group and style elements inside each breadcrumb item.

class="lnr lnr-home" and class="lnr lnr-chevron-right": These classes (lnr lnr-home and lnr lnr-chevron-right) are part of an icon library (such as LineIcons), used to display icons before each link or text in the breadcrumb.

Anchor (`<a>`) Elements for Links:

<a href="#">Home</a>
<a href="#">Category</a>
<a href="#">Subcategory</a>

<a>: This is an anchor element used to create hyperlinks.
href="#": This sets the destination of the hyperlink to "#", which typically means the link does not navigate anywhere specific (used as a placeholder).

Text Node for Current Page:

Current Page

This is plain text within the last <li> element, indicating the current page in the breadcrumb navigation. Unlike the previous items, it is not a hyperlink (<a>).

CSS Code

Breadcrumb Container (.breadcrumb):

.breadcrumb {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

list-style-type: none;: Removes the default bullet points for the list items.
margin: 0;: Removes any default margin around the list.
padding: 0;: Removes any default padding inside the list.
display: flex;: Uses Flexbox to layout the list items in a row.
flex-wrap: wrap;: Allows the items to wrap onto the next line if they exceed the container's width.

Breadcrumb Items (.breadcrumb-item):

.breadcrumb-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  font-size: 16px;
  color: #333;
}

display: flex;: Uses Flexbox to align the content of each breadcrumb item.
align-items: center;: Vertically centers the content within each breadcrumb item.
margin-right: 10px;: Adds space between each breadcrumb item.
font-size: 16px;: Sets the font size for the breadcrumb items.
color: #333;: Sets the text color for the breadcrumb items.

Last Breadcrumb Item (.breadcrumb-item:last-child):

.breadcrumb-item:last-child {
  color: #777;
}

color: #777;: Changes the text color for the last breadcrumb item to a lighter shade of gray, indicating it's the current page.

Last Breadcrumb Item Hover (.breadcrumb-item:last-child:hover):

.breadcrumb-item:last-child:hover {
  cursor: default;
}

cursor: default;: Changes the cursor to the default pointer when hovering over the last breadcrumb item, indicating it is not clickable.

Breadcrumb Links (.breadcrumb-item a):

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
  margin-left: 5px;
}

text-decoration: none;: Removes the default underline from the links.
color: #007bff;: Sets the link color to a shade of blue.
transition: color 0.3s ease;: Smoothly transitions the link color when it changes.
margin-left: 5px;: Adds a small space to the left of the link text.

Breadcrumb Links Hover (.breadcrumb-item a:hover):

.breadcrumb-item a:hover {
  color: #0056b3;
}

color: #0056b3;: Changes the link color to a darker shade of blue when hovered over.

Icons or Elements Inside Breadcrumb Items (.breadcrumb-item span):

.breadcrumb-item span {
  margin-right: 5px;
  font-weight: 600;
}

margin-right: 5px;: Adds space to the right of any span elements inside breadcrumb items.
font-weight: 600;: Makes the span text bold.

Responsive Design for Small Screens (@media screen and (max-width: 600px)):

@media screen and (max-width: 600px) {
  .breadcrumb-item {
    margin: 5px;
    font-size: 14px;
  }
}

This media query applies styles when the screen width is 600px or less.
margin: 5px;: Adjusts the margin for each breadcrumb item to be smaller.
font-size: 14px;: Reduces the font size for better readability on smaller screens.