Navigation Menu

Collection of navigation options.

html

<nav class="navmenu navmenu--horizontal" style="--accent:#D9C8F0; --gap:18px;" aria-label="Section">
  <a class="navmenu__item is-active" href="#" aria-current="page">Overview</a>
  <a class="navmenu__item" href="#">Guides</a>
  <a class="navmenu__item" href="#">API reference</a>
  <a class="navmenu__item" href="#">Changelog</a>
</nav>
<style>
.navmenu { display: flex; gap: var(--gap); font: 500 14px system-ui, sans-serif; }
.navmenu--vertical { flex-direction: column; align-items: flex-start; }
.navmenu__item { text-decoration: none; color: #241430; opacity: .6; padding: 2px 0; }
.navmenu__item.is-active { opacity: 1; color: var(--accent); }
.navmenu__item:hover, .navmenu__item:focus-visible { opacity: 1; outline: none; text-decoration: underline; }
</style>

tailwind

<nav aria-label="Section" class="navmenu-tw navmenu-tw--horizontal flex font-medium text-sm" style="--accent:#D9C8F0; gap:18px;">
  <a class="no-underline font-semibold hover:underline" href="#" aria-current="page" style="color:#D9C8F0;">Overview</a>
  <a class="no-underline text-[#241430]/60 hover:opacity-100 hover:underline" href="#">Guides</a>
  <a class="no-underline text-[#241430]/60 hover:opacity-100 hover:underline" href="#">API reference</a>
  <a class="no-underline text-[#241430]/60 hover:opacity-100 hover:underline" href="#">Changelog</a>
</nav>
<style>
.navmenu-tw--vertical { flex-direction: column; align-items: flex-start; }
.navmenu-tw a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function NavigationMenu({
  orientation = "horizontal",
  activeLabel = "Overview",
  accent = "#D9C8F0",
  spacing = 18,
}) {
  const items = ["Guides", "API reference", "Changelog"];
  return (
    <nav aria-label="Section" style={{ display: "flex", flexDirection: orientation === "vertical" ? "column" : "row", alignItems: orientation === "vertical" ? "flex-start" : "center", gap: spacing, fontFamily: "system-ui, sans-serif", fontSize: 14, fontWeight: 500 }}>
      <a href="#" aria-current="page" style={{ textDecoration: "none", color: accent, opacity: 1 }}>{activeLabel}</a>
      {items.map((i) => (
        <a key={i} href="#" style={{ textDecoration: "none", color: "#241430", opacity: .6 }}>{i}</a>
      ))}
    </nav>
  );
}