Breadcrumb

Hierarchical location indicator.

html

<nav class="crumb crumb--depth-3" style="--accent:#E8A020; --sep:'/';" aria-label="Breadcrumb">
  <ol class="crumb__list">
    <li class="crumb__item crumb__item--l1"><a class="crumb__link" href="#">Home</a></li>
    <li class="crumb__item crumb__item--l2"><a class="crumb__link" href="#">Category</a></li>
    <li class="crumb__item crumb__item--l3"><a class="crumb__link" href="#">Subcategory</a></li>
    <li class="crumb__item crumb__item--l4"><span aria-current="page">Settings</span></li>
  </ol>
</nav>
<style>
.crumb { font: 14px system-ui, sans-serif; }
.crumb__list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.crumb__item { display: flex; align-items: center; color: #241430; }
.crumb__item:not(:first-child)::before { content: var(--sep); margin: 0 8px; opacity: .5; }
.crumb__link { color: #241430; text-decoration: none; opacity: .65; }
.crumb__link:hover, .crumb__link:focus-visible { opacity: 1; text-decoration: underline; outline: none; }
.crumb__item [aria-current="page"] { font-weight: 600; color: var(--accent); }
.crumb--depth-2 .crumb__item--l2, .crumb--depth-2 .crumb__item--l3 { display: none; }
.crumb--depth-3 .crumb__item--l3 { display: none; }
</style>

tailwind

<nav aria-label="Breadcrumb" class="crumb-tw crumb-tw--depth-3 font-sans text-sm" style="--accent:#E8A020; --sep:'/';">
  <ol class="flex flex-wrap list-none p-0 m-0">
    <li class="crumb-tw__item crumb-tw__item--l1 flex items-center text-[#241430]"><a class="no-underline text-[#241430]/65 hover:opacity-100 hover:underline" href="#">Home</a></li>
    <li class="crumb-tw__item crumb-tw__item--l2 flex items-center text-[#241430]"><a class="no-underline text-[#241430]/65 hover:opacity-100 hover:underline" href="#">Category</a></li>
    <li class="crumb-tw__item crumb-tw__item--l3 flex items-center text-[#241430]"><a class="no-underline text-[#241430]/65 hover:opacity-100 hover:underline" href="#">Subcategory</a></li>
    <li class="crumb-tw__item flex items-center"><span class="font-semibold" style="color:#E8A020;" aria-current="page">Settings</span></li>
  </ol>
</nav>
<style>
.crumb-tw__item:not(:first-child)::before { content: var(--sep); margin: 0 8px; opacity: .5; }
.crumb-tw--depth-2 .crumb-tw__item--l2, .crumb-tw--depth-2 .crumb-tw__item--l3 { display: none; }
.crumb-tw--depth-3 .crumb-tw__item--l3 { display: none; }
</style>

react

export function Breadcrumb({
  depth = "3",
  separator = "/",
  page = "Settings",
  accent = "#E8A020",
}) {
  const n = Number(depth);
  const items = [
    { label: "Home", show: true },
    { label: "Category", show: n >= 3 },
    { label: "Subcategory", show: n >= 4 },
  ].filter((i) => i.show);
  return (
    <nav aria-label="Breadcrumb" style={{ fontFamily: "system-ui, sans-serif", fontSize: 14 }}>
      <ol style={{ display: "flex", flexWrap: "wrap", listStyle: "none", padding: 0, margin: 0 }}>
        {items.map((item, i) => (
          <li key={item.label} style={{ display: "flex", alignItems: "center", color: "#241430" }}>
            {i > 0 && <span style={{ margin: "0 8px", opacity: .5 }}>{separator}</span>}
            <a href="#" style={{ color: "#241430", opacity: .65, textDecoration: "none" }}>{item.label}</a>
          </li>
        ))}
        <li style={{ display: "flex", alignItems: "center" }}>
          <span style={{ margin: "0 8px", opacity: .5 }}>{separator}</span>
          <span aria-current="page" style={{ fontWeight: 600, color: accent }}>{page}</span>
        </li>
      </ol>
    </nav>
  );
}