Drill-down

Move from summary to detail.

html

<div class="drill-demo" data-level="summary" style="--accent:#A8E6C1;">
  <nav class="drill-demo__crumbs">
    <span class="drill-demo__crumb drill-demo__crumb--summary">Regions</span>
    <span class="drill-demo__crumb drill-demo__crumb--category">&rsaquo; Europe</span>
    <span class="drill-demo__crumb drill-demo__crumb--detail">&rsaquo; France</span>
  </nav>
  <ul class="drill-demo__list drill-demo__list--summary">
    <li>Europe &rsaquo;</li><li>Americas &rsaquo;</li><li>Asia Pacific &rsaquo;</li>
  </ul>
  <ul class="drill-demo__list drill-demo__list--category">
    <li>France &rsaquo;</li><li>Germany &rsaquo;</li><li>Spain &rsaquo;</li>
  </ul>
  <ul class="drill-demo__list drill-demo__list--detail">
    <li>Paris &mdash; 2,190 orders</li><li>Lyon &mdash; 640 orders</li>
  </ul>
</div>
<style>
.drill-demo { width: 300px; font: 14px system-ui, sans-serif; color: #241430; }
.drill-demo__crumbs { font-size: 12px; color: #241430aa; margin-bottom: 10px; }
.drill-demo__crumb { display: none; }
.drill-demo__crumb--summary { display: inline; color: var(--accent); font-weight: 700; }
.drill-demo[data-level="category"] .drill-demo__crumb--category { display: inline; font-weight: 700; color: var(--accent); }
.drill-demo[data-level="detail"] .drill-demo__crumb--category, .drill-demo[data-level="detail"] .drill-demo__crumb--detail { display: inline; }
.drill-demo[data-level="detail"] .drill-demo__crumb--detail { font-weight: 700; color: var(--accent); }
.drill-demo__list { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 6px; }
.drill-demo__list li { padding: 10px 12px; border-radius: 8px; background: #24143010; }
.drill-demo[data-level="summary"] .drill-demo__list--summary { display: flex; }
.drill-demo[data-level="category"] .drill-demo__list--category { display: flex; }
.drill-demo[data-level="detail"] .drill-demo__list--detail { display: flex; }
</style>

tailwind

<div class="drill-tw drill-tw--summary" style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <nav class="text-xs text-[#241430aa] mb-2.5">
    <span class="drill-tw__crumb drill-tw__crumb--summary font-bold" style="color:#A8E6C1">Regions</span>
    <span class="drill-tw__crumb drill-tw__crumb--category hidden">&rsaquo; Europe</span>
    <span class="drill-tw__crumb drill-tw__crumb--detail hidden">&rsaquo; France</span>
  </nav>
  <ul class="drill-tw__list drill-tw__list--summary hidden list-none m-0 p-0 flex-col gap-1.5"><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">Europe &rsaquo;</li><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">Americas &rsaquo;</li><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">Asia Pacific &rsaquo;</li></ul>
  <ul class="drill-tw__list drill-tw__list--category hidden list-none m-0 p-0 flex-col gap-1.5"><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">France &rsaquo;</li><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">Germany &rsaquo;</li><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">Spain &rsaquo;</li></ul>
  <ul class="drill-tw__list drill-tw__list--detail hidden list-none m-0 p-0 flex-col gap-1.5"><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">Paris &mdash; 2,190 orders</li><li class="px-3 py-2.5 rounded-lg bg-[#24143010]">Lyon &mdash; 640 orders</li></ul>
</div>
<style>
.drill-tw--summary .drill-tw__list--summary { display: flex; }
.drill-tw--category .drill-tw__list--category, .drill-tw--category .drill-tw__crumb--category { display: flex; }
.drill-tw--detail .drill-tw__list--detail, .drill-tw--detail .drill-tw__crumb--category, .drill-tw--detail .drill-tw__crumb--detail { display: flex; }
.drill-tw--category .drill-tw__crumb--category, .drill-tw--detail .drill-tw__crumb--category, .drill-tw--detail .drill-tw__crumb--detail { display: inline; font-weight: 700; color: #A8E6C1; }
</style>

react

export function DrillDown({
  level = "summary",
  title = "Regions",
  accent = "#A8E6C1",
}) {
  const lists = {
    summary: ["Europe \u203a", "Americas \u203a", "Asia Pacific \u203a"],
    category: ["France \u203a", "Germany \u203a", "Spain \u203a"],
    detail: ["Paris \u2014 2,190 orders", "Lyon \u2014 640 orders"],
  };
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <nav style={{ fontSize: 12, color: "#241430aa", marginBottom: 10 }}>
        <span style={{ fontWeight: level === "summary" ? 700 : 400, color: level === "summary" ? accent : "inherit" }}>{title}</span>
        {level !== "summary" && <span style={{ fontWeight: level === "category" ? 700 : 400, color: level === "category" ? accent : "inherit" }}> &rsaquo; Europe</span>}
        {level === "detail" && <span style={{ fontWeight: 700, color: accent }}> &rsaquo; France</span>}
      </nav>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
        {lists[level].map((it) => <li key={it} style={{ padding: "10px 12px", borderRadius: 8, background: "#24143010" }}>{it}</li>)}
      </ul>
    </div>
  );
}