Sitemap Tree Footer Block for React

Edit TREES at the top of the file: a tree is a root (href, label) with its children; each child is a page with its own children, which may be empty. Three levels is the depth the markup draws; a fourth level would need one more nested list in the component. The page count in the brand band is worked out from the data.

Each node is a list item with two pseudo-elements: a vertical hairline along its start edge that runs the item's full height (so it carries on past the item's own children) and a short elbow into the label. The last item in a list stops its vertical line at the elbow. They use logical properties, so in a right-to-left page the tree mirrors: lines on the right, elbows pointing left. No images or SVG are involved.

It is nested ul lists, so a screen reader announces the list's size and each nested level ("list, 3 items", "nested"), and every node is a link in the tab order. It deliberately isn't an ARIA tree widget: that would hide the links behind a single tab stop and arrow-key navigation, which suits an app and not a footer of plain links. The root of each tree is a link inside an h2, so you can also jump by heading.

It is worked out from the same data that draws the trees, counting every root, page and child, so adding a link updates it. It is wrapped in bdi so a number keeps its place in right-to-left text.

Below lg the three trees stack in one column, each under a rule with + marks, and the legal band's copyright sits above the policy links. From lg they sit side by side behind the dividers. Nothing scrolls sideways at 320 pixels.