SiteTreeNav

A sitemap-like grid component that displays the full documentation tree with expandable categories.

Overview

SiteTreeNav is a Preact island component that renders a responsive grid of expandable category cards showing the full documentation tree. It provides a sitemap-style index of all documentation pages, with categories that can be expanded and collapsed.

Live Example

Below is SiteTreeNav rendered with the full documentation tree (same as the home page):

Usage

SiteTreeNav is used in pages/index.tsx to display the home page sitemap:

// pages/index.tsx
import { buildNavTree, groupSatelliteNodes } from "@/utils/docs";
import { getCategoryOrder } from "@/utils/nav-scope";
import SiteTreeNav from "@/components/site-tree-nav";
import { resolveNavSource } from "./lib/_nav-source-docs";
import { defaultLocale } from "@/config/i18n";

export default function IndexPage() {
  const locale = defaultLocale;
  const { navDocs, categoryMeta } = resolveNavSource(locale, undefined);
  const tree = buildNavTree(navDocs, locale, categoryMeta);
  const categoryOrder = getCategoryOrder();
  const groupedTree = groupSatelliteNodes(tree, categoryOrder);

  return (
    <SiteTreeNav
      tree={groupedTree}
      categoryOrder={categoryOrder}
      categoryIgnore={["inbox", "develop"]}
    />
  );
}

The component uses Preact state for expand/collapse interactivity, so it hydrates on the client through zfb's island runtime.

Props

Features

• Responsive grid layout — uses repeat(auto-fill, minmax(min(18rem, 100%), 1fr)) to adapt from single-column on mobile to multi-column on wider screens

• Expandable categories — each category card is collapsible, open by default

• Hierarchical tree — nested pages are indented with connector lines showing the tree structure

• Category links — top-level categories display an arrow icon and link to their index page

• Leaf pages — individual doc pages are rendered as clickable links

Source

The component is defined at src/components/site-tree-nav.tsx.