Breadcrumb Navigation

"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

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

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

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/