Doc Aside

@sushindustries/ui

An on-page table of contents that is a rail on desktop and a collapsed row on mobile.

5 min read
View as MarkdownEdit on GitHub

Composing it

It expects to sit beside the prose it is a contents list for, in a two-column layout with its own scroll region - it is position: sticky internally, so its parent needs to be as tall as the article for the stickiness to have anywhere to travel. A DocAside dropped into a short parent just sits at the top and never appears to track anything.

<DocAside headings={headings} footer={<FeedbackButtons />} />
tsx

Anything passed as footer renders under the contents list, inside the same rail - a "was this helpful" control, a copy-page-as-markdown action, whatever belongs within reach of someone who has already found this sidebar.