Navigation list

A sidebar with a current page. The background rests there and leaves only while you point elsewhere.

Prints

24 prints

import { createMovingHighlight } from "@reuse-sh/interactions";

// The current page carries data-current. The highlight rests there
// and follows the pointer or focus while they are inside the list.
const nav = document.querySelector(".sidebar");
const highlight = createMovingHighlight(nav);

import { MovingHighlight } from "@reuse-sh/interactions/react";

export function Sidebar({ pages, current }) {
  return (
    <MovingHighlight className="sidebar">
      {pages.map((page) => (
        <a
          key={page.href}
          href={page.href}
          data-reuse-row
          data-current={page.href === current ? "" : undefined}
          aria-current={page.href === current ? "page" : undefined}
        >
          {page.label}
        </a>
      ))}
    </MovingHighlight>
  );
}