How to create breadcrumb in css

CssHow-ToBeginner · 4 min read

How to Create Breadcrumb Navigation in CSS Easily

To create a breadcrumb in CSS, use an ordered or unordered list with inline or flex display to arrange links horizontally. Style the list items with separators like > using CSS ::after pseudo-elements and remove the separator from the last item with :last-child selector.

📐

Syntax

A breadcrumb is usually built with a list (<ul> or <ol>) where each list item (<li>) contains a link (<a>). CSS styles the list to display horizontally and adds separators between items.

display: flex; or display: inline; to arrange items in a row.
::after pseudo-element to add separator symbols like >.
:last-child selector to remove the separator from the last breadcrumb item.

css

nav.breadcrumb {
  font-family: Arial, sans-serif;
}

nav.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
}

nav.breadcrumb li {
  position: relative;
}

nav.breadcrumb li::after {
  content: ">";
  margin-left: 0.5rem;
  color: #555;
}

nav.breadcrumb li:last-child::after {
  content: "";
}

💻

Example

This example shows a breadcrumb navigation bar with clickable links separated by > symbols. The last item has no separator.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Breadcrumb Example</title>
<style>
  nav.breadcrumb {
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }
  nav.breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    gap: 0.5rem;
  }
  nav.breadcrumb li {
    position: relative;
  }
  nav.breadcrumb li a {
    text-decoration: none;
    color: #007bff;
  }
  nav.breadcrumb li a:hover {
    text-decoration: underline;
  }
  nav.breadcrumb li::after {
    content: ">";
    margin-left: 0.5rem;
    color: #555;
  }
  nav.breadcrumb li:last-child::after {
    content: "";
  }
</style>
</head>
<body>
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Electronics</a></li>
    <li>Smartphones</li>
  </ul>
</nav>
</body>
</html>

Output

A horizontal breadcrumb navigation bar showing: Home > Products > Electronics > Smartphones, where the first three are blue clickable links and the last is plain text with no > after it.

⚠️

Common Pitfalls

Common mistakes when creating breadcrumbs in CSS include:

Not removing the separator after the last item, which looks messy.
Using inline display without spacing, causing items to stick together.
Not using semantic HTML like <nav> with aria-label for accessibility.
Hardcoding separators in HTML instead of using CSS ::after, making maintenance harder.

css

/* Wrong: separator hardcoded in HTML */
<ul>
  <li>Home &gt;</li>
  <li>Products &gt;</li>
  <li>Smartphones</li>
</ul>

/* Right: separator added by CSS */
ul li::after {
  content: ">";
  margin-left: 0.5rem;
}
ul li:last-child::after {
  content: "";
}

📊

Quick Reference

Tips for creating breadcrumbs in CSS:

Use display: flex; on the list for easy horizontal layout.
Add separators with ::after pseudo-elements, not in HTML.
Remove the separator on the last item with :last-child.
Use semantic <nav> with aria-label="Breadcrumb" for accessibility.
Style links with hover effects for better user experience.

✅

Key Takeaways

Use a list with flex display to arrange breadcrumb items horizontally.

Add separators using CSS ::after pseudo-elements and remove from the last item.

Keep HTML semantic with

Avoid hardcoding separators in HTML; use CSS for easier maintenance.

Style links clearly and add hover effects for better usability.