TableOfContents

import { TableOfContents } from "anexui";

const items = [
  { id: "overview", label: "Overview", level: 2 },
  { id: "install",  label: "Install",  level: 2 },
  { id: "usage",    label: "Usage",    level: 3 },
];

<TableOfContents items={items} activeId="install" />

import { useState, useEffect } from "react";
import { TableOfContents } from "anexui";

function DocsLayout({ items, children }) {
  const [activeId, setActiveId] = useState("");

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries.find((e) => e.isIntersecting);
        if (visible) setActiveId(visible.target.id);
      },
      { rootMargin: "-20% 0px -70% 0px" }
    );
    items.forEach(({ id }) => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, [items]);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 200px" }}>
      <article>{children}</article>
      <aside>
        <TableOfContents items={items} activeId={activeId} />
      </aside>
    </div>
  );
}