Breadcrumb — StealThis.dev

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 540px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.groups {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.group {
}
.group-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 0.625rem;
}

/* ── Breadcrumb ── */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 0.875rem;
}

.bc-item {
  display: flex;
  align-items: center;
}

.bc-item + .bc-item::before {
  content: var(--sep, "/");
  color: #334155;
  margin: 0 0.5rem;
  font-weight: 400;
}

.breadcrumb--slash {
  --sep: "/";
}
.breadcrumb--chevron {
  --sep: "›";
}
.breadcrumb--dot {
  --sep: "·";
}

.bc-link {
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s;
}
.bc-link:hover {
  color: #f2f6ff;
}

.bc-item--current {
  color: #f2f6ff;
  font-weight: 500;
}

/* Hidden items (collapsible) */
.bc-hidden {
  display: none;
}
.breadcrumb--expanded .bc-hidden {
  display: flex;
}
.breadcrumb--expanded .bc-ellipsis {
  display: none;
}

.bc-ellipsis-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0 0.4rem;
  border-radius: 0.25rem;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}
.bc-ellipsis-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f2f6ff;
}

(function () {
  var btn = document.getElementById("bc-expand");
  var bc = document.getElementById("bc-collapse");
  if (btn && bc) {
    btn.addEventListener("click", function () {
      bc.classList.add("breadcrumb--expanded");
    });
  }
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Breadcrumb</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Breadcrumb</h1>
    <p class="demo-sub">Navigation trail with separator and collapsible variants.</p>

    <div class="groups">
      <div class="group">
        <p class="group-label">Slash separator</p>
        <nav aria-label="Breadcrumb">
          <ol class="breadcrumb breadcrumb--slash">
            <li class="bc-item"><a href="#" class="bc-link">Home</a></li>
            <li class="bc-item"><a href="#" class="bc-link">Library</a></li>
            <li class="bc-item"><a href="#" class="bc-link">Components</a></li>
            <li class="bc-item bc-item--current" aria-current="page">Breadcrumb</li>
          </ol>
        </nav>
      </div>

      <div class="group">
        <p class="group-label">Chevron separator</p>
        <nav aria-label="Breadcrumb">
          <ol class="breadcrumb breadcrumb--chevron">
            <li class="bc-item"><a href="#" class="bc-link">Home</a></li>
            <li class="bc-item"><a href="#" class="bc-link">Library</a></li>
            <li class="bc-item"><a href="#" class="bc-link">Components</a></li>
            <li class="bc-item bc-item--current" aria-current="page">Breadcrumb</li>
          </ol>
        </nav>
      </div>

      <div class="group">
        <p class="group-label">Dot separator</p>
        <nav aria-label="Breadcrumb">
          <ol class="breadcrumb breadcrumb--dot">
            <li class="bc-item"><a href="#" class="bc-link">Home</a></li>
            <li class="bc-item"><a href="#" class="bc-link">Library</a></li>
            <li class="bc-item bc-item--current" aria-current="page">Breadcrumb</li>
          </ol>
        </nav>
      </div>

      <div class="group">
        <p class="group-label">Collapsible (click … to expand)</p>
        <nav aria-label="Breadcrumb">
          <ol class="breadcrumb breadcrumb--chevron breadcrumb--collapsible" id="bc-collapse">
            <li class="bc-item"><a href="#" class="bc-link">Home</a></li>
            <li class="bc-item bc-hidden"><a href="#" class="bc-link">Library</a></li>
            <li class="bc-item bc-hidden"><a href="#" class="bc-link">Web Animations</a></li>
            <li class="bc-item bc-ellipsis">
              <button class="bc-ellipsis-btn" id="bc-expand" aria-label="Show full path">&hellip;</button>
            </li>
            <li class="bc-item"><a href="#" class="bc-link">Components</a></li>
            <li class="bc-item bc-item--current" aria-current="page">Breadcrumb</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Show the user’s current location within a navigational hierarchy.

Separator variants

Slash — Home / Library / Breadcrumb
Chevron — Home › Library › Breadcrumb
Dot — Home · Library · Breadcrumb

Collapsible

Long paths collapse middle items into … — click to expand all items inline.

Accessibility

Uses <nav aria-label="Breadcrumb"> + <ol> list markup. Current page has aria-current="page".