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 elements text can be customized with the data-text attribute. The order of the text validation is:

1. data-text attribute
2. innerText
3. textContent

<dap-ds-typography variant="h2" anchor data-text="very good h2 type">Section h2</dap-ds-typography>
<h4 class="dds-anchor" data-text="very good h4">native h4</h4>

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'

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

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSTOC } from 'dap-design-system/components'

No slots available.

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-toc::part(base) {
  /* Your custom styles */
}

Example usage:

<dap-ds-toc class="my-custom-dap-ds-toc">
  Table of Contents (TOC)
</dap-ds-toc>

.my-custom-dap-ds-toc::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-toc
  style="--dds-toc-border-width: value; --dds-toc-border-color: value;">
  Table of Contents (TOC)
</dap-ds-toc>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-toc {
  --dds-toc-border-width: value;
  --dds-toc-border-color: value;
  --dds-toc-title-color: value;
}

<dap-ds-toc class="my-custom-dap-ds-toc">
  Table of Contents (TOC)
</dap-ds-toc>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-toc {
  --dds-toc-border-width: value;
  --dds-toc-border-color: value;
}