Breadcrumb Post Header Block for React

Edit ROOT, HIDDEN and SECTION at the top of the file, and the POST object for the title, dek, author, date and reading time. HIDDEN is the list of parents the ellipsis folds away, outermost first; the menu and its accessible name ("Show Essays and Coastlines") are built from it. The trail is a navigation landmark labelled Breadcrumb, and the current page is not a link.

The ellipsis is a ghost icon button with a name that lists what it hides. It opens a menu of links, one per hidden parent, and Escape closes it and returns focus to the button. The middle stays collapsed at every width, which keeps the line short on a phone and quiet on a desktop. To show every parent on wide screens, render the hidden links as breadcrumb items from md and keep the menu for smaller screens, as the breadcrumb banner does.

The last crumb is the only one that shrinks: it truncates with an ellipsis, while the title in full is the heading right under the trail. Nothing wraps and nothing scrolls sideways, down to a 320 pixel screen.

No. The date is fixed text in the data, written as an ISO string and formatted in UTC so the server and the browser print the same day, and the reading time is a number you set. Nothing is computed from today.

Yes. The trail, the byline and the spacing use logical properties, the chevrons mirror, and the date and the reading time are isolated with bdi so "14 min read" keeps its order.

Every link is a plain href="#": point them at your routes. Menu items render the link they're given with render.