Table of Contents is a component that turns any long page in Rapidweaver Elements into something readers can navigate. Give your text container an ID, enter the same ID in the component, and it builds a clickable outline from the headings it finds – no anchor links to create by hand, no list to maintain when the text changes.
It was made for the Elements CMS, where the content is written by someone else and you never know how long the next article will be. But it makes no difference where the text comes from: the Markdown component, the Typography component, or a page you wrote yourself. Blog posts, documentation, knowledge base articles, terms and conditions, long landing pages – wherever readers need to find one section among many, the outline appears and keeps itself up to date.
Every detail is built to fit your design rather than fight it. Fonts, sizes and colors come straight from your theme and follow light and dark mode, so a change in Theme Studio carries through to every page. Each heading level from H1 to H6 has its own typography, indentation, spacing and marker – fourteen symbols to choose from, all drawn at a uniform size. Set the level range you want, and give the component a minimum number of headings so short pages simply skip the outline instead of showing a stub.
It behaves on small screens too. The list can fold away behind its title, and you decide separately on which screen sizes the toggle appears and where it starts collapsed – the full outline in a desktop sidebar, one tidy line on a phone. Smooth scrolling brings readers to the section they picked, with an offset that keeps sticky headers from covering it. Several instances can run on the same page, each pointing at its own container.
Built natively for Rapidweaver Elements, everything is configured visually in the inspector – no HTML, JavaScript or CSS to write. Set it up once, and every article that follows gets its outline on its own.
Table of Contents: Every heading, one click away.
What you get
- The Table of Contents component for Rapidweaver Elements
- Automatic outline – built from the headings in your text and updated whenever the content changes
- Container-based – enter the same ID on your text container and in the component, nothing else to connect
- Works with the Elements CMS, the Markdown component, the Typography component and text written by hand
- Free choice of heading levels from H1 to H6 – plus a minimum heading count, so short pages skip the outline entirely
- Separate styling for every level – font, size, weight, letter spacing, line height, indentation and marker
- Fourteen markers – bullets, circles, squares, arrows, chevrons, stars and check marks, all drawn at a uniform size
- Collapsible list with per-screen control – set separately where the toggle appears and where the list starts collapsed
- Smooth scrolling with an adjustable offset, so sticky headers never cover the section your reader picked
- Multiple instances on one page, each pointing at its own container
- Theme-aware colors, picked straight from your theme palette
- Full light and dark mode support
- Included with your purchase: an example project file showing you exactly how to put FlurryPixels to work.
ⓘ Once installed, you'll find the demo project in the projects panel when creating a new project – click "See All Library Items" to show the full list.
- Fully responsive — works on all screen sizes
- Fully compatible with Rapidweaver Elements themes — change the theme and get a totally different design experience