# Table of contents
Links to the sections of the current page, usually in a side region of a long page.
```tsx
// demo.tsx
import {TableOfContents} from '@earendil-works/elanor-react';
export default function TableOfContentsDemo() {
return (
UsageCurrent sectionAPI
);
}
```
## Usage
```tsx
import {TableOfContents} from '@earendil-works/elanor-react';
Usage
;
```
The demo links point to sections of this page. Root renders a `nav` named "Table of contents". `List` renders an ordered list, at the top and for nested entries.
## Current section
`active` marks the section in view with `aria-current="location"`: its text turns `semantic.color.text.primary`, and the `Indicator`, a bar on the list's start edge, marks it. When `active` moves to another entry, the indicator slides there and resizes with `semantic.transition.movement.tableOfContents.indicator`, overshooting slightly; instantly when the reader prefers reduced motion. The application decides which section is current, for example with an `IntersectionObserver`. In the demo, choosing an entry makes it current.
```tsx
// active.tsx
import {TableOfContents} from '@earendil-works/elanor-react';
import {useState} from 'react';
const sections = [
{id: 'usage', title: 'Usage'},
{id: 'current-section', title: 'Current section'},
{id: 'nested-sections', title: 'Nested sections'},
{id: 'api', title: 'API'},
];
export default function TableOfContentsActive() {
const [active, setActive] = useState('current-section');
return (
{sections.map((section) => (
setActive(section.id)}
>
{section.title}
))}
);
}
```
## Nested sections
Put another `List` inside an `Item`, after its `Link`, for subsections. Nested entries indent only their text, so the bar stays on the same edge.
```tsx
// nested.tsx
import {TableOfContents} from '@earendil-works/elanor-react';
export default function TableOfContentsNested() {
return (
UsageCurrent sectionNested sections
Subsections
);
}
```
## Menu
For layouts without room for the list beside the content, `Menu` collapses the table of contents into a bar with a dropdown. `MenuTrigger` shows the current section; `MenuPopup` holds the same `List`, `Item`, and `Link` parts, which look like dropdown items there, and choosing a link closes it. The list also closes when the bar's scroll container scrolls. Opening it moves focus to the first link, or to the list when opened by touch, without scrolling the page.
```tsx
// menu.tsx
import {TableOfContents} from '@earendil-works/elanor-react';
import {useState} from 'react';
const sections = [
{id: 'usage', title: 'Usage'},
{id: 'current-section', title: 'Current section'},
{id: 'nested-sections', title: 'Nested sections'},
{id: 'menu', title: 'Menu'},
];
export default function TableOfContentsMenuDemo() {
const [active, setActive] = useState('menu');
const current = sections.find((section) => section.id === active);
return (
{current?.title}
{sections.map((section) => (
setActive(section.id)}
>
{section.title}
))}
);
}
```
```tsx
Current section
```
Keep the trigger's text in sync with the `active` link. Assistive technology hears "Table of contents: " before it; change that with the trigger's `label`, and the list's name with the popup's `label`.
The menu is a bar with separators above and below that sticks to the top of its scroll container, the document or a scrolling ancestor such as a drawer, on `semantic.number.layer.floating`, with a shadow that fades in as content scrolls beneath it. To stick below a header, set `inset-block-start` in your CSS, such as `calc(var(--semantic-dimension-size-top-navigation) - var(--semantic-dimension-border-width-small))` below a top navigation: the bar sticks one border width higher, so the header's border covers its top separator.
## Static rendering
On pages rendered on the server without React in the browser, the behaviors follow the page instead of the application: the static root marks the section in view and moves the `Indicator`, and the static menu shows it in its trigger. Lists, items, links, and the indicator stay the same.
```tsx
…Overview…
```
```ts
import {
createPopover,
createTableOfContents,
createTableOfContentsMenu,
enhance,
} from '@earendil-works/elanor-react';
enhance({
'table-of-contents': createTableOfContents,
'table-of-contents-menu': createTableOfContentsMenu,
popover: createPopover,
});
```
A section is in view once its heading reaches the `scroll-padding-top` of the headings' scroll container, the document or a scrolling ancestor, and the last one at the end of it. The menu closes when a link is chosen or the page scrolls, and its bar's shadow fades in as content scrolls beneath it.
## API
### `TableOfContents.Root`
A `nav` named "Table of contents". Put a `List` of `Item`s inside, and an `Indicator` after it to mark the active entry with a bar that moves.
Renders `