Sitemap Filter Footer Block for React

Edit GROUPS at the top of the file: each group is a title and its links (an href and a label). The count is worked out from the data, so it never needs editing. Every link is an anchor with href="#": point each at its page or use your router's link. The filter compares labels only; to also match a description or a section name, change matches to read it.

It ignores case and accents, so "api" finds "API pages" and "resume" finds "Résumé", and it matches anywhere in the label, not only at the start. A blank field shows everything. Matching letters are marked with the catalog's Search Highlight Text, in a light tint of your foreground colour.

Yes. The count is a status line that is polite, so a screen reader reads the new number after you pause typing, without interrupting. The field has its own name, Filter the sitemap, and the clear button is named Clear the filter. When nothing matches, the status reads "No pages match" and the message below says so too.

It moves focus to the field, as in many docs sites, unless you are already typing in a field, an editable area or a menu, and unless Ctrl, Command or Alt is held. The key is announced to assistive technology as the field's shortcut. If your page already uses / for its own search, remove the effect that listens for it and the hint beside the field.

The sitemap keeps a floor height (about one screen of columns), so filtering never pulls the page up. With a very short result the columns simply sit at the top of that space.

Below md the field spans the page with the count under it, and the columns sit two across; from md they sit three across and from lg all six. Nothing scrolls sideways at 320 pixels.