Route Segment

Individual portion of a route.

html

<nav class="rseg" aria-label="Route segments" style="--accent:#A8E6C1;">
  <ol class="rseg__list">
    <li class="rseg__item"><a class="rseg__link" href="#">/shop/shoes</a></li>
    <li class="rseg__item rseg__item--param"><a class="rseg__link" href="#">:size</a></li>
    <li class="rseg__item"><span class="rseg__current" aria-current="page">running</span></li>
  </ol>
</nav>
<style>
.rseg { font: 13px "SFMono-Regular", Consolas, monospace; color: #241430; }
.rseg__list { display: flex; list-style: none; padding: 8px 12px; margin: 0; background: #FAF7F2; border-radius: 8px; width: fit-content; }
.rseg__item { display: flex; align-items: center; }
.rseg__item:not(:first-child)::before { content: "/"; margin: 0 4px; opacity: .4; }
.rseg__link { color: #241430; text-decoration: none; opacity: .7; }
.rseg__link:hover, .rseg__link:focus-visible { opacity: 1; outline: none; text-decoration: underline; }
.rseg__item--param .rseg__link { color: var(--accent); font-weight: 700; }
.rseg__current { color: var(--accent); font-weight: 700; }
</style>

tailwind

<nav aria-label="Route segments" class="font-mono text-[13px] text-[#241430]" style="--accent:#A8E6C1;">
  <ol class="rseg-tw flex list-none px-3 py-2 m-0 bg-[#FAF7F2] rounded-lg w-fit">
    <li class="rseg-tw__item flex items-center"><a class="text-[#241430] no-underline opacity-70 hover:opacity-100 hover:underline" href="#">/shop/shoes</a></li>
    <li class="rseg-tw__item flex items-center"><a class="no-underline font-bold" href="#" style="color:#A8E6C1;">:size</a></li>
    <li class="rseg-tw__item flex items-center"><span class="font-bold" aria-current="page" style="color:#A8E6C1;">running</span></li>
  </ol>
</nav>
<style>
.rseg-tw__item:not(:first-child)::before { content: "/"; margin: 0 4px; opacity: .4; }
</style>

react

export function RouteSegment({
  base = "/shop/shoes",
  current = "running",
  showParam = true,
  accent = "#A8E6C1",
}) {
  const segments = [{ label: base, link: true }];
  if (showParam) segments.push({ label: ":size", link: true, dynamic: true });
  return (
    <nav aria-label="Route segments" style={{ fontFamily: "SFMono-Regular, Consolas, monospace", fontSize: 13, color: "#241430" }}>
      <ol style={{ display: "flex", listStyle: "none", padding: "8px 12px", margin: 0, background: "#FAF7F2", borderRadius: 8, width: "fit-content" }}>
        {segments.map((s, i) => (
          <li key={s.label} style={{ display: "flex", alignItems: "center" }}>
            {i > 0 && <span style={{ margin: "0 4px", opacity: .4 }}>/</span>}
            <a href="#" style={{ color: s.dynamic ? accent : "#241430", textDecoration: "none", opacity: s.dynamic ? 1 : .7, fontWeight: s.dynamic ? 700 : 400 }}>{s.label}</a>
          </li>
        ))}
        <li style={{ display: "flex", alignItems: "center" }}>
          <span style={{ margin: "0 4px", opacity: .4 }}>/</span>
          <span aria-current="page" style={{ color: accent, fontWeight: 700 }}>{current}</span>
        </li>
      </ol>
    </nav>
  );
}