Table of content component is a simple component that displays the current page's headings in a table of content format.

TOC component uses the IntersectionObserver Api. You can use all the options of the IntersectionObserver with the same attributes.

Default TOC works with native html heading elements (h1, h2, h3, etc..) with the usage of the dds-anchor class. dap-ds-typography heading variants (variant="h3" etc..) can be used also with the anchor attribute to generate the anchor links. You can see the example of this component on the right side of the page.

<dap-ds-toc header="Table of contents"></dap-ds-toc>

The TOC component can be configured to display only specific heading levels. The minHeadingLevel and maxHeadingLevel attribute can be used to set the levels. minHeadingLevel default value is 2, maxHeadingLevel default value is 3.

<dap-ds-toc header="Table of contents" minHeadingLevel="3" maxHeadingLevel="6"></dap-ds-toc>

The TOC component items are indented by default. Setting the noIndent attribute to true will remove the indentation.

<dap-ds-toc header="Table of contents" noIndent></dap-ds-toc>

import { DapDSTOC } from 'dap-design-system/dist/dds'

import { DapDSTOCReact } from 'dap-design-system/dist/react'

No slots available.