Navigation Rail

Compact vertical navigation.

html

<div class="rail-demo rail-demo--left">
  <nav class="rail-demo__rail" style="width:64px;">
    <div class="rail-demo__item is-active" style="color:#A8E6C1;"><span class="rail-demo__dot" style="background:#A8E6C1;"></span><small>Home</small></div>
    <div class="rail-demo__item"><span class="rail-demo__dot"></span><small>Search</small></div>
    <div class="rail-demo__item"><span class="rail-demo__dot"></span><small>Settings</small></div>
  </nav>
  <div class="rail-demo__content">Content</div>
</div>
<style>
.rail-demo { display: flex; height: 150px; font: 11px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.rail-demo--right { flex-direction: row-reverse; }
.rail-demo__rail { flex: none; box-sizing: border-box; background: #241430; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 16px; }
.rail-demo__item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #FAF7F2aa; }
.rail-demo__item.is-active { color: inherit; }
.rail-demo__dot { width: 20px; height: 20px; border-radius: 6px; background: #FAF7F244; }
.rail-demo__content { flex: 1; display: flex; align-items: center; justify-content: center; background: #FAF7F2; color: #24143066; font-size: 13px; }
</style>

tailwind

<div class="flex h-[150px] font-sans text-[11px] text-[#241430] border border-[#24143022] rail-tw rail-tw--left">
  <nav class="flex-none box-border bg-[#241430] flex flex-col items-center gap-4 pt-4" style="width:64px;">
    <div class="flex flex-col items-center gap-1" style="color:#A8E6C1;"><span class="w-5 h-5 rounded-md" style="background:#A8E6C1;"></span><small>Home</small></div>
    <div class="flex flex-col items-center gap-1 text-[#FAF7F2]/70"><span class="w-5 h-5 rounded-md bg-[#FAF7F2]/25"></span><small>Search</small></div>
    <div class="flex flex-col items-center gap-1 text-[#FAF7F2]/70"><span class="w-5 h-5 rounded-md bg-[#FAF7F2]/25"></span><small>Settings</small></div>
  </nav>
  <div class="flex-1 flex items-center justify-center bg-[#FAF7F2] text-[#24143066] text-[13px]">Content</div>
</div>
<style>
.rail-tw--right { flex-direction: row-reverse; }
</style>

react

export function NavigationRail({
  position = "left",
  width = 64,
  accent = "#A8E6C1",
  labels = true,
}) {
  const items = ["Home", "Search", "Settings"];
  return (
    <div style={{ display: "flex", flexDirection: position === "right" ? "row-reverse" : "row", height: 150, fontFamily: "system-ui, sans-serif", fontSize: 11, color: "#241430", border: "1px solid #24143022" }}>
      <nav style={{ flex: "none", boxSizing: "border-box", width, background: "#241430", display: "flex", flexDirection: "column", alignItems: "center", gap: 16, paddingTop: 16 }}>
        {items.map((label, i) => (
          <div key={label} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, color: i === 0 ? accent : "#FAF7F2aa" }}>
            <span style={{ width: 20, height: 20, borderRadius: 6, background: i === 0 ? accent : "#FAF7F244" }} />
            {labels && <small>{label}</small>}
          </div>
        ))}
      </nav>
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#FAF7F2", color: "#24143066", fontSize: 13 }}>Content</div>
    </div>
  );
}