TableOfContents
The TableOfContents component collects headings and bookmarks within the current page and displays them in a tree representing their hierarchy. When you select an item in this tree, the component navigates the page to the selected position.
Properties
maxHeadingLevel (default: "6")
Defines the maximum heading level (1 to 6) to include in the table of contents. For example, if it is 2, then H1 and H2 are displayed, but lower levels (H3 to H6) are not.
smoothScrolling (default: "false")
This property indicates that smooth scrolling is used while scrolling the selected table of contents items into view.
Events
This component does not have any events.
Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-TableOfContents | transparent | transparent |
| border-color-TableOfContentsItem | none | none |
| border-style-TableOfContents | solid | solid |
| border-style-TableOfContentsItem | solid | solid |
| border-style-TableOfContentsItem--active | solid | solid |
| border-width-TableOfContents | 0 | 0 |
| border-width-TableOfContentsItem | $space-0_5 | $space-0_5 |
| border-width-TableOfContentsItem--active | $space-0_5 | $space-0_5 |
| borderColor-TableOfContents | transparent | transparent |
| borderColor-TableOfContentsItem | $borderColor | $borderColor |
| borderColor-TableOfContentsItem--active | $color-primary-500 | $color-primary-500 |
| borderRadius-TableOfContents | 0 | 0 |
| borderRadius-TableOfContentsItem | 0 | 0 |
| borderRadius-TableOfContentsItem--active | 0 | 0 |
| borderStyle-TableOfContents | none | none |
| borderWidth-TableOfContents | none | none |
| color-TableOfContentsItem | $textColor-primary | $textColor-primary |
| color-TableOfContentsItem--active | $color-primary-500 | $color-primary-500 |
| fontFamily-TableOfContentsItem | $fontFamily | $fontFamily |
| fontSize-TableOfContentsItem | $fontSize-smaller | $fontSize-smaller |
| fontWeight-TableOfContentsItem | $fontWeight-normal | $fontWeight-normal |
| fontWeight-TableOfContentsItem--active | $fontWeight-bold | $fontWeight-bold |
| height-TableOfContents | auto | auto |
| letterSpacing-TableOfContentsItem | 0 | 0 |
| marginBottom-TableOfContents | 0 | 0 |
| marginTop-TableOfContents | 0 | 0 |
| padding-TableOfContentsItem | none | none |
| padding-TableOfContentsItem-level-1 | none | none |
| padding-TableOfContentsItem-level-2 | none | none |
| padding-TableOfContentsItem-level-3 | none | none |
| padding-TableOfContentsItem-level-4 | none | none |
| padding-TableOfContentsItem-level-5 | none | none |
| padding-TableOfContentsItem-level-6 | none | none |
| paddingBottom-TableOfContentsItem | none | none |
| paddingBottom-TableOfContentsItem-level-1 | none | none |
| paddingBottom-TableOfContentsItem-level-2 | none | none |
| paddingBottom-TableOfContentsItem-level-3 | none | none |
| paddingBottom-TableOfContentsItem-level-4 | none | none |
| paddingBottom-TableOfContentsItem-level-5 | none | none |
| paddingBottom-TableOfContentsItem-level-6 | none | none |
| paddingHorizontal-TableOfContents | $space-8 | $space-8 |
| paddingHorizontal-TableOfContentsItem | $space-2 | $space-2 |
| paddingHorizontal-TableOfContentsItem-level-1 | unset | unset |
| paddingHorizontal-TableOfContentsItem-level-2 | unset | unset |
| paddingHorizontal-TableOfContentsItem-level-3 | unset | unset |
| paddingHorizontal-TableOfContentsItem-level-4 | unset | unset |
| paddingHorizontal-TableOfContentsItem-level-5 | unset | unset |
| paddingHorizontal-TableOfContentsItem-level-6 | unset | unset |
| paddingLeft-TableOfContentsItem | none | none |
| paddingLeft-TableOfContentsItem-level-1 | none | none |
| paddingLeft-TableOfContentsItem-level-2 | none | none |
| paddingLeft-TableOfContentsItem-level-3 | none | none |
| paddingLeft-TableOfContentsItem-level-4 | none | none |
| paddingLeft-TableOfContentsItem-level-5 | none | none |
| paddingLeft-TableOfContentsItem-level-6 | none | none |
| paddingRight-TableOfContentsItem | none | none |
| paddingRight-TableOfContentsItem-level-1 | none | none |
| paddingRight-TableOfContentsItem-level-2 | none | none |
| paddingRight-TableOfContentsItem-level-3 | none | none |
| paddingRight-TableOfContentsItem-level-4 | none | none |
| paddingRight-TableOfContentsItem-level-5 | none | none |
| paddingRight-TableOfContentsItem-level-6 | none | none |
| paddingTop-TableOfContentsItem | none | none |
| paddingTop-TableOfContentsItem-level-1 | none | none |
| paddingTop-TableOfContentsItem-level-2 | none | none |
| paddingTop-TableOfContentsItem-level-3 | none | none |
| paddingTop-TableOfContentsItem-level-4 | none | none |
| paddingTop-TableOfContentsItem-level-5 | none | none |
| paddingTop-TableOfContentsItem-level-6 | none | none |
| paddingVertical-TableOfContents | $space-4 | $space-4 |
| paddingVertical-TableOfContentsItem | $space-2 | $space-2 |
| paddingVertical-TableOfContentsItem-level-1 | none | none |
| paddingVertical-TableOfContentsItem-level-2 | none | none |
| paddingVertical-TableOfContentsItem-level-3 | none | none |
| paddingVertical-TableOfContentsItem-level-4 | none | none |
| paddingVertical-TableOfContentsItem-level-5 | none | none |
| paddingVertical-TableOfContentsItem-level-6 | none | none |
| textColor-TableOfContentsItem | none | none |
| textTransform-TableOfContentsItem | none | none |
| verticalAlign-TableOfContentsItem | baseline | baseline |
| width-TableOfContents | auto | auto |