Split Sitemap 404 Error Block for React

Edit SECTIONS: each section has an id, a name and its docs, and each page an id, a name and a path. The tree is built from them, and the count in the panel's heading is derived, so it always matches. Generate the array from your routes or your CMS at build time; the tree handles a few dozen rows comfortably. For hundreds, search is the better way out of a 404, and error-404-search is the block for it.

Tab goes to the tree once. Then Up and Down move between visible rows, Right opens a closed section and moves into an open one, Left closes it or moves back to its section, Home and End jump to the first and last row, and Enter picks a page. The tree is named "Docmeadow sitemap" for screen readers, and each page's link text is the row's name. The links inside the rows are kept out of the tab order, since the tree is walked by key.

In the demo it only updates the line under the panel ("Would open Quickstart at /guides/quickstart. Nothing navigates in this demo."). In your app give each leaf's link its real href and navigate in onSelectionChange, with your router's push; a click on the link itself also works. Keep the 404 status on your server: render this page from your framework's not-found route.

No. The tree sits in a fixed-height panel (h-64) that scrolls on its own, so opening every section never changes the page's height or moves the headline, which is centered in the band. With one section open the panel just fits.

The halves stack: the headline and the link home come first, so the way back is on the first screen, then a rule with plus marks, then the sitemap with the same panel and the same line. The divider between the halves appears from the lg breakpoint.

A list of six links guesses where the visitor wanted to go. A sitemap doesn't guess: it shows everything, closed down to three headings, so a lost visitor can see what the site holds and where their page might have lived.