silk-widgets-kobweb/com.varabyte.kobweb.silk.components.document/Toc

fun Toc(modifier: Modifier = Modifier, variant: CssStyleVariant<TocKind>? = null, minHeaderLevel: Int = 2, maxHeaderLevel: Int = 3, indent: CSSLengthOrPercentageNumericValue = 1.cssRem, provideHeadingText: (HTMLHeadingElement) -> String = { it.textContent.orEmpty() }, ref: ElementRefScope<HTMLUListElement>? = null)(source)

Generates a table of contents for the current page, by searching the page for header elements with IDs.

It's important that each header element has an ID, as this is what the TOC will link to. This is a standard format output by markdown, but you may need to add IDs manually if you're adding Composables directly:

Toc()
H2(Modifier.id("h1").toAttrs()) { Text("Header 1") }
H3(Modifier.id("h1s1").toAttrs()) { Text("Subheader 1.1") }
H3(Modifier.id("h1s2").toAttrs()) { Text("Subheader 1.2") }
H2(Modifier.id("h2").toAttrs()) { Text("Header 2") }
H2(Modifier.id("h3").toAttrs()) { Text("Header 3") }
H3(Modifier.id("h3s1").toAttrs()) { Text("Subheader 3.1") }

Parameters

minHeaderLevel

The minimum header level to start paying attention to; any lower level headers will be skipped over. This defaults to 2 and not 1 because H1 is usually the title of the page and not included in the TOC.

maxHeaderLevel

The maximum header level to pay attention to; any higher level headers will be skipped over.

provideHeadingText

A function that takes a header element and returns the text to display in the TOC. By default, this is the text content of the header element, but users can override it if necessary, e.g. to strip out spanned elements meant for icons.