Recipe

React integration

Use a small client component with a ref, call the nav-schema mount helper in an effect, and destroy it on cleanup.

The host component

Write a thin wrapper around mountSidebar() or mountMegaMenu(). React owns the host element; nav-schema owns the generated navigation inside it.

SidebarNav.tsx

import { useEffect, useRef } from "react";
import { mountSidebar } from "nav-schema";

export function SidebarNav({ schema }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    return mountSidebar(ref.current, { schema });
  }, [schema]);

  return <aside ref={ref} />;
}

Using it

tsx

<SidebarNav schema={sidebarSchema} />