Table of Contents

An organized list of the content on your page.

First Heading

This is the first heading.


This is a sub-heading H3 example.

This H4 is excluded

H4 headings were added to the list of excluded heading tags, so this will not show up in the table of contents.

Icon heading

Here we have a heading with an icon.

This H2 gets ignored

You can adjust the filter function to show or hide headings based on specific requirements. Check the code for an example.

Accessible by Design

Melt UI puts accessibility front and center, making sure your UI components are inclusive and user-friendly. We follow WAI-ARIA design patternsand take care of all the nitty-gritty details like aria attributes, role management, focus handling, and keyboard navigation. Each builder's page includes a section on accessibility, with references to relevant WAI-ARIA guidelines & instructions for using the builder in an accessible manner.

Bring Your Own Styles

The builders ship with zero predefined styles, allowing you to customize them to seamlessly integrate with your application's design system. Whether you prefer vanilla CSS, CSS preprocessors, or CSS-in-JS libraries, our components work harmoniously with your preferred styling solution.

Open & Extensible

Melt UI embraces your desire for customization. The builder architecture is open and flexible, allowing you to tinker with every aspect of the components. Wrap them, extend their functionality, or add event listener and props to tailor them to your exact needs.

On This Page


  • Customize which headers should be excluded
  • Choose between smooth or instant scroll behaviour
  • Add a scroll offset if needed
  • Define a filter function to control which headings are allowed
  • Overwrite the default scroll function with your own


  • Item: The anchor item for each content.

API Reference


The builder function used to create the table of contents component.


Prop Default Type / Description
selector * -

The selector of the container for which the table of contents (ToC) should be created.

exclude ['h1']

A list of headings that should be excluded from the ToC. Possible heading values: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'.

activeType lowest
'all' | | 'all-parents' | 'lowest' | 'highest' | 'lowest-parents' | 'highest-parents'

Describes which header should be considered active. 'none' means that no intersection observers are added and no headings are considered active. 'all' means that all headings with visible content are considered active. 'all-parents' means that parents of all headings with visible content are also considered active. 'lowest' means that the heading of the lowest visible content is considered active. 'highest' means the opposite. 'lowest-parents' means that parents of the heading with the lowest visible content are also considered active, and the same goes for 'highest-parents'.

scrollOffset 0

The number of pixels to add to the top of the element when scrolling. Can be used if you have a fixed header which might block the scrolled-to element.

scrollBehaviour smooth
'smooth' | 'instant'

Defines whether the scroll behaviour should be 'smooth' or 'instant'.

headingFilterFn -

Allows you to pass a filter function to filter the headings that are returned in the 'headingsTree' store. The filter function gets an HTMLHeadingElement passed to it.

scrollFn -

Allows you to overwrite the default scroll function with your own custom one. The scroll function gets the heading id passed to it.


Builder Description

The builder store used to create a table of contents item.


State Description

A writable store that shows the list of active headers.


A writable store that lists all the headings within the specified container.


Helper Description

Returns whether the heading with the given id is currently active.


A table of contents item.

Data Attributes

Data Attribute Value

Present on all item elements.


The id of the heading element the item links to.


Whether the item is currently active.

Custom Events

Event Value
m-click (e: ) => void

Keyboard Navigation

Key Behavior

Scrolls to the focused heading.


Moves focus to the next focusable element.