Sidebar Navigation

Navigation presented vertically.

html

<nav class="sidenav sidenav--light " style="--accent:#D9C8F0; --w:220px;" aria-label="Sidebar">
  <a class="sidenav__item is-active" href="#" aria-current="page"><span class="sidenav__icon" aria-hidden="true"></span><span class="sidenav__label">Overview</span></a>
  <a class="sidenav__item" href="#"><span class="sidenav__icon" aria-hidden="true"></span><span class="sidenav__label">Projects</span></a>
  <a class="sidenav__item" href="#"><span class="sidenav__icon" aria-hidden="true"></span><span class="sidenav__label">Team</span></a>
  <a class="sidenav__item" href="#"><span class="sidenav__icon" aria-hidden="true"></span><span class="sidenav__label">Settings</span></a>
</nav>
<style>
.sidenav { display: flex; flex-direction: column; gap: 2px; width: var(--w); padding: 10px; border-radius: 12px; font: 500 14px system-ui, sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  .sidenav { transition: width .15s ease; }
}
.sidenav--light { background: #FAF7F2; color: #241430; }
.sidenav--dark { background: #241430; color: #FAF7F2; }
.sidenav--collapsed { width: 60px; }
.sidenav__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: inherit; opacity: .7; }
.sidenav__item.is-active { opacity: 1; background: var(--accent); color: #241430; }
.sidenav__item:hover, .sidenav__item:focus-visible { opacity: 1; outline: none; }
.sidenav__icon { width: 16px; height: 16px; border-radius: 5px; border: 2px solid currentColor; flex: none; }
.sidenav--collapsed .sidenav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
</style>

tailwind

<nav aria-label="Sidebar" class="sidenav-tw sidenav-tw--light  flex flex-col gap-0.5 p-2.5 rounded-xl font-medium text-sm" style="--accent:#D9C8F0; width:220px;">
  <a class="flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline font-semibold" href="#" aria-current="page" style="background:#D9C8F0;color:#241430;"><span class="sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none" aria-hidden="true"></span><span class="sidenav-tw__label">Overview</span></a>
  <a class="flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline opacity-70 hover:opacity-100" href="#" style="color:inherit;"><span class="sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none" aria-hidden="true"></span><span class="sidenav-tw__label">Projects</span></a>
  <a class="flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline opacity-70 hover:opacity-100" href="#" style="color:inherit;"><span class="sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none" aria-hidden="true"></span><span class="sidenav-tw__label">Team</span></a>
  <a class="flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline opacity-70 hover:opacity-100" href="#" style="color:inherit;"><span class="sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none" aria-hidden="true"></span><span class="sidenav-tw__label">Settings</span></a>
</nav>
<style>
.sidenav-tw--light { background: #FAF7F2; color: #241430; }
.sidenav-tw--dark { background: #241430; color: #FAF7F2; }
.sidenav-tw--collapsed { width: 60px !important; }
.sidenav-tw--collapsed .sidenav-tw__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
</style>

react

export function SidebarNavigation({
  collapsed = false,
  width = 220,
  activeLabel = "Overview",
  accent = "#D9C8F0",
  variant = "light",
}) {
  const dark = variant === "dark";
  const labelStyle = collapsed
    ? { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap" }
    : {};
  const items = [
    { label: activeLabel, active: true },
    { label: "Projects" },
    { label: "Team" },
    { label: "Settings" },
  ];
  return (
    <nav aria-label="Sidebar" style={{ display: "flex", flexDirection: "column", gap: 2, width: collapsed ? 60 : width, padding: 10, borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 14, fontWeight: 500, background: dark ? "#241430" : "#FAF7F2", color: dark ? "#FAF7F2" : "#241430" }}>
      {items.map((item) => (
        <a key={item.label} href="#" aria-current={item.active ? "page" : undefined} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 10px", borderRadius: 8, textDecoration: "none", color: item.active ? "#241430" : "inherit", opacity: item.active ? 1 : .7, background: item.active ? accent : "transparent" }}>
          <span aria-hidden="true" style={{ width: 16, height: 16, borderRadius: 5, border: "2px solid currentColor", flex: "none" }} />
          <span style={labelStyle}>{item.label}</span>
        </a>
      ))}
    </nav>
  );
}