Breadcrumb Navigation

Mike's Notes

My job today was sorting out the default breadcrumb component for the Ajabbi Design System. Users with an account will be able to override this CSS.

Resources

• https://www.learnui.design/blog/the-3-laws-of-locality.html
• https://www.smashingmagazine.com/2022/04/breadcrumbs-ux-design/
• https://www.w3schools.com/howto/howto_css_breadcrumbs.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
• https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

17/06/2025

Article

By: Mike Peters

On a Sandy Beach: 15/06/2024

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

"A breadcrumb navigation provides links back to each previous page the user navigated through, and shows the user's current location in a website." - w3Schools

I like something as simple as the one below.

Home > Pictures > Summer 15 

Here are examples of code from

• w3schools
• MDN
• WAI-ARIA patterns
• Ajabbi Design System.

From w3Schools

Example

Home > Pictures > Summer 15

Code

<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>

CSS

/* Style the list */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

From WAI-ARIA Patterns

Example

WAI-ARIA Authoring Practices Guide (APG) > Patterns > Breadcrumb Pattern > Breadcrumb Example

Code

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../../../">
        WAI-ARIA Authoring Practices Guide (APG)
      </a>
    </li>
    <li>
      <a href="../../../">
        Patterns
      </a>
    </li>
    <li>
      <a href="../../">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="#" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>

CSS

nav.breadcrumb {
  padding: 0.8em 1em;
  border: 1px solid hsl(0deg 0% 90%);
  border-radius: 4px;
  background: hsl(300deg 14% 97%);
}

nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(15deg);
  border-right: 0.1em solid currentcolor;
  height: 0.8em;
  content: "";
}

nav.breadcrumb [aria-current="page"] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

From MDN

Example

Home > Category > Sub Category > Type > Product

Code

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Type</a></li>
    <li><span aria-current="page">Product</span></li>
  </ul>
</nav>

CSS

.breadcrumb {
  padding: 0 .5rem;
}

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

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  margin: 0 .25rem;
  content: "→";
}

From Ajabbi Design System

Example

Home > Design System > Components > Breadcrumb

Code

<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
  <li><a href="../../index.html">Home</a></li>
  <li><a href="../index.html">Design System</a></li>
  <li><a href="index.html">Components</a></li>
  <li><a href="#" aria-current="page">Breadcrumb</a></li>
</ol>
</nav>

CSS

nav.breadcrumb {
  padding: 0.8em 1em;
  border: 1px solid hsl(0deg 0% 90%);
  background: hsl(300deg 14% 97%);
}

nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  height: 0.8em;
  content: ">";
}

nav.breadcrumb [aria-current="page"] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}