AtoUI

Table of Contents

An organized list of the content on your page.

Edit page Styled source

First Heading

This is the first heading.

Sub-Heading

This is a sub-heading H3 example.

Reactive ToC

The ToC reacts to changes on the page and updates when headings change or get added or removed.

Another sub-heading

This one also gets added and removed.

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.

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

Ato UI is built on top of Melt UI, an accessible headless library that follows WAI-ARIA design patterns and takes care of all the nitty-gritty details like aria attributes, role management, focus handling, and keyboard navigation. You can read more about it on the official Melt UI docs website, where each builder has a thorough description of implemented accessibility features.

Styled Components

Our styled components offer additional functionalities on top of Melt UI builders, while also staying flexible and offering ways to customize each component. This is done through our theme designer, which controls the color palette as well as things like border radiuses and text colors, and through style props that components offer, where you can overwrite default component styles.

On This Page

Updating ToC on New Page

If you put the table of contents (ToC) in the layout file where the content for which the ToC should be created is updated with each page, you will have to wrap the table of contents in a #key block.

<script lang="ts">
    import { page } from '$app/stores';
    import { TOC } from 'ato-ui';
</script>
 
{#key $page.url.pathname}
    <TOC target="#content" />
{/key}

API

Props

TOC

selector
:
string
The selector of the container for which the table of contents (ToC) should be created.
label
:
string
=
'On This Page'
Set the header label of the ToC.
exclude
:
=
['h1']
A list of headings that should be excluded from the ToC. Possible values: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'.
scrollOffset
:
number
=
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. Has no effect if you overwrite the default scroll function with your own (see scrollFn prop).
scrollBehaviour
:
=
'smooth'
Defines whether the scroll behaviour should be 'smooth' or 'instant'. Has no effect if you overwrite the default scroll function with your own (see scrollFn prop).
activeType
:
=
'highest'
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. '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'.
headingFilterFn
:
| null
=
null
Allows you to pass a filter function to filter the headings that are returned in the 'headingsTree' store, so you can define which headings should or should not show up in the table of contents. The filter function gets an HTMLHeadingElement passed to it.
scrollFn
:
| null
=
null
Allows you to overwrite the default scroll function with your own custom one. The scroll function gets the heading id passed to it. Using this overwrites the scrollOffset and scrollBehaviour props.
showMarker
:
boolean
=
true
Show a marker beside the active element.
markerType
:
=
'highest'
Define beside which heading the marker should appear. 'highest' is the first active heading. 'lowest' is the last active heading.
labelStyles
:
string
=
'font-semibold text-surface-900-50'
Set the styles for the label header.
contentStyles
:
string
=
'text-surface-700-800-200-100'
Set the content link styles.
activeStyles
:
string
=
'text-surface-900-50'
Set the active content link styles.
markerStyles
:
string
=
'w-0.5 rounded-container bg-tertiary-500'
Set the marker styles.
Previous Page
Switch
Next Page
Tabs