Melt UI

An organized list of the content on your page.

View code

First Heading

This is the first heading.

Sub-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

Features

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

Anatomy

Item: The anchor item for each content.

API Reference

createTableOfContents

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

Props

Prop	Default	Type / Description
`selector` *	-	`string` The selector of the container for which the table of contents (ToC) should be created.
`exclude`	`['h1']`	`Heading[]` 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'`.
`rootMargin`	-	`string` The root margin for the intersection observer. Refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) for more information.
`scrollOffset`	`0`	`number` 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`	-	`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`	-	`ScrollFn` Allows you to overwrite the default scroll function with your own custom one. The scroll function gets the heading id passed to it.
`pushStateFn`	-	`PushStateFn` Allows you to overwrite the browser pushState function. The pushState function receives the fragment that corresponds to the heading id. It is intended to be used with SvelteKit's navigation module.

Builders

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

States

State	Description
`activeHeadingIdxs`	A writable store that shows the list of active headers.
`headingsTree`	A writable store that lists all the headings within the specified container.

Helpers

Helper	Description
`isActive`	Returns whether the heading with the given id is currently active.

item

A table of contents item.

Data Attributes

Data Attribute	Value
`[data-melt-table-of-contents-item]`	Present on all item elements.
`[data-id]`	The id of the heading element the item links to.
`[data-active]`	Whether the item is currently active.

Custom Events

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

Keyboard Navigation

Key	Behavior
`Enter`	Scrolls to the focused heading.
`Tab`	Moves focus to the next focusable element.