Tab Links ^New

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/tab-links.css" />

<nav class="tab-links" aria-label="Sections">
  <a href="/overview" aria-current="page">Overview</a>
  <a href="/activity">Activity</a>
  <a href="/settings">Settings</a>
</nav>

bar.addEventListener("click", (event) => {
  const link = event.target.closest("a[href]");
  if (!link || link.hasAttribute("aria-current")) return;

  event.preventDefault();

  document.startViewTransition(() => {
    for (const a of bar.querySelectorAll("a"))
      a.removeAttribute("aria-current");
    link.setAttribute("aria-current", "page");
  });
});

<style>
  @view-transition {
    navigation: auto;
  }
</style>

/* the highlight */
::view-transition-group(.ui-tab-links) {
  animation-duration: 400ms;
  animation-timing-function: var(--ease-snap);
}

/* the labels */
::view-transition-group(.ui-tab-link),
::view-transition-old(.ui-tab-link),
::view-transition-new(.ui-tab-link) {
  animation-duration: 400ms;
}

<nav class="tab-links morph">
  <a href="/overview" aria-current="page">Overview</a>
  <a href="/activity">Activity</a>
  <a href="/settings">Settings</a>
</nav>

<nav class="tab-links">
  <a href="/board" aria-current="page">
    <svg><!-- icon --></svg> Board</a
  >
  <a href="/table">
    <svg><!-- icon --></svg> Table</a
  >
  <a href="/chart">
    <svg><!-- icon --></svg> Chart</a
  >
</nav>

<nav class="tab-links">
  <a href="/overview" aria-current="page">Overview</a>
  <a href="/analytics">Analytics</a>
  <a aria-disabled="true">Reports</a>
</nav>

<nav class="tab-links" aria-label="Folders">
  <a href="/inbox" aria-current="page">Inbox</a>
  <a href="/archive">Archive</a>
</nav>

<nav class="tab-links" aria-label="Sort" style="--ui-tab-links-name: ui-sort">
  <a href="/inbox?sort=new">Newest</a>
  <a href="/inbox?sort=old" aria-current="page">Oldest</a>
</nav>