Table of Contents
An organized list of the content on your page.
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: |
activeType | lowest | 'all' | | 'all-parents' | 'lowest' | 'highest' | 'lowest-parents' | 'highest-parents' Describes which header should be considered active.
|
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. |
Builders
| Builder | Description |
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. |
On This Page