TableOfContents
đź“”
This component is in an experimental state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.
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 |
| backgroundColor-TableOfContentsItem | none | none |
| backgroundColor-TableOfContentsItem-level-1 | none | none |
| backgroundColor-TableOfContentsItem-level-2 | none | none |
| backgroundColor-TableOfContentsItem-level-3 | none | none |
| backgroundColor-TableOfContentsItem-level-4 | none | none |
| backgroundColor-TableOfContentsItem-level-5 | none | none |
| backgroundColor-TableOfContentsItem-level-6 | none | none |
| 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 |
| direction-TableOfContentsItem | none | none |
| direction-TableOfContentsItem-level-1 | none | none |
| direction-TableOfContentsItem-level-2 | none | none |
| direction-TableOfContentsItem-level-3 | none | none |
| direction-TableOfContentsItem-level-4 | none | none |
| direction-TableOfContentsItem-level-5 | none | none |
| direction-TableOfContentsItem-level-6 | none | none |
| fontFamily-TableOfContentsItem | $fontFamily | $fontFamily |
| fontFamily-TableOfContentsItem-level-1 | none | none |
| fontFamily-TableOfContentsItem-level-2 | none | none |
| fontFamily-TableOfContentsItem-level-3 | none | none |
| fontFamily-TableOfContentsItem-level-4 | none | none |
| fontFamily-TableOfContentsItem-level-5 | none | none |
| fontFamily-TableOfContentsItem-level-6 | none | none |
| fontSize-TableOfContentsItem | $fontSize-smaller | $fontSize-smaller |
| fontSize-TableOfContentsItem-level-1 | none | none |
| fontSize-TableOfContentsItem-level-2 | none | none |
| fontSize-TableOfContentsItem-level-3 | none | none |
| fontSize-TableOfContentsItem-level-4 | none | none |
| fontSize-TableOfContentsItem-level-5 | none | none |
| fontSize-TableOfContentsItem-level-6 | none | none |
| fontStretch-TableOfContentsItem | none | none |
| fontStretch-TableOfContentsItem-level-1 | none | none |
| fontStretch-TableOfContentsItem-level-2 | none | none |
| fontStretch-TableOfContentsItem-level-3 | none | none |
| fontStretch-TableOfContentsItem-level-4 | none | none |
| fontStretch-TableOfContentsItem-level-5 | none | none |
| fontStretch-TableOfContentsItem-level-6 | none | none |
| fontStyle-TableOfContentsItem | none | none |
| fontStyle-TableOfContentsItem-level-1 | none | none |
| fontStyle-TableOfContentsItem-level-2 | none | none |
| fontStyle-TableOfContentsItem-level-3 | none | none |
| fontStyle-TableOfContentsItem-level-4 | none | none |
| fontStyle-TableOfContentsItem-level-5 | none | none |
| fontStyle-TableOfContentsItem-level-6 | none | none |
| fontVariant-TableOfContentsItem | none | none |
| fontVariant-TableOfContentsItem-level-1 | none | none |
| fontVariant-TableOfContentsItem-level-2 | none | none |
| fontVariant-TableOfContentsItem-level-3 | none | none |
| fontVariant-TableOfContentsItem-level-4 | none | none |
| fontVariant-TableOfContentsItem-level-5 | none | none |
| fontVariant-TableOfContentsItem-level-6 | none | none |
| fontWeight-TableOfContentsItem | $fontWeight-normal | $fontWeight-normal |
| fontWeight-TableOfContentsItem--active | $fontWeight-bold | $fontWeight-bold |
| fontWeight-TableOfContentsItem-level-1 | none | none |
| fontWeight-TableOfContentsItem-level-2 | none | none |
| fontWeight-TableOfContentsItem-level-3 | none | none |
| fontWeight-TableOfContentsItem-level-4 | none | none |
| fontWeight-TableOfContentsItem-level-5 | none | none |
| fontWeight-TableOfContentsItem-level-6 | none | none |
| height-TableOfContents | auto | auto |
| letterSpacing-TableOfContentsItem | 0 | 0 |
| letterSpacing-TableOfContentsItem-level-1 | none | none |
| letterSpacing-TableOfContentsItem-level-2 | none | none |
| letterSpacing-TableOfContentsItem-level-3 | none | none |
| letterSpacing-TableOfContentsItem-level-4 | none | none |
| letterSpacing-TableOfContentsItem-level-5 | none | none |
| letterSpacing-TableOfContentsItem-level-6 | none | none |
| lineBreak-TableOfContentsItem | none | none |
| lineBreak-TableOfContentsItem-level-1 | none | none |
| lineBreak-TableOfContentsItem-level-2 | none | none |
| lineBreak-TableOfContentsItem-level-3 | none | none |
| lineBreak-TableOfContentsItem-level-4 | none | none |
| lineBreak-TableOfContentsItem-level-5 | none | none |
| lineBreak-TableOfContentsItem-level-6 | none | none |
| lineHeight-TableOfContentsItem | none | none |
| lineHeight-TableOfContentsItem-level-1 | none | none |
| lineHeight-TableOfContentsItem-level-2 | none | none |
| lineHeight-TableOfContentsItem-level-3 | none | none |
| lineHeight-TableOfContentsItem-level-4 | none | none |
| lineHeight-TableOfContentsItem-level-5 | none | none |
| lineHeight-TableOfContentsItem-level-6 | none | none |
| 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 | $space-1 | $space-1 |
| 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 |
| textAlign-TableOfContentsItem | none | none |
| textAlign-TableOfContentsItem-level-1 | none | none |
| textAlign-TableOfContentsItem-level-2 | none | none |
| textAlign-TableOfContentsItem-level-3 | none | none |
| textAlign-TableOfContentsItem-level-4 | none | none |
| textAlign-TableOfContentsItem-level-5 | none | none |
| textAlign-TableOfContentsItem-level-6 | none | none |
| textAlignLast-TableOfContentsItem | none | none |
| textAlignLast-TableOfContentsItem-level-1 | none | none |
| textAlignLast-TableOfContentsItem-level-2 | none | none |
| textAlignLast-TableOfContentsItem-level-3 | none | none |
| textAlignLast-TableOfContentsItem-level-4 | none | none |
| textAlignLast-TableOfContentsItem-level-5 | none | none |
| textAlignLast-TableOfContentsItem-level-6 | none | none |
| textColor-TableOfContentsItem | none | none |
| textColor-TableOfContentsItem-level-1 | none | none |
| textColor-TableOfContentsItem-level-2 | none | none |
| textColor-TableOfContentsItem-level-3 | none | none |
| textColor-TableOfContentsItem-level-4 | none | none |
| textColor-TableOfContentsItem-level-5 | none | none |
| textColor-TableOfContentsItem-level-6 | none | none |
| textDecorationColor-TableOfContentsItem | none | none |
| textDecorationColor-TableOfContentsItem-level-1 | none | none |
| textDecorationColor-TableOfContentsItem-level-2 | none | none |
| textDecorationColor-TableOfContentsItem-level-3 | none | none |
| textDecorationColor-TableOfContentsItem-level-4 | none | none |
| textDecorationColor-TableOfContentsItem-level-5 | none | none |
| textDecorationColor-TableOfContentsItem-level-6 | none | none |
| textDecorationLine-TableOfContentsItem | none | none |
| textDecorationLine-TableOfContentsItem-level-1 | none | none |
| textDecorationLine-TableOfContentsItem-level-2 | none | none |
| textDecorationLine-TableOfContentsItem-level-3 | none | none |
| textDecorationLine-TableOfContentsItem-level-4 | none | none |
| textDecorationLine-TableOfContentsItem-level-5 | none | none |
| textDecorationLine-TableOfContentsItem-level-6 | none | none |
| textDecorationStyle-TableOfContentsItem | none | none |
| textDecorationStyle-TableOfContentsItem-level-1 | none | none |
| textDecorationStyle-TableOfContentsItem-level-2 | none | none |
| textDecorationStyle-TableOfContentsItem-level-3 | none | none |
| textDecorationStyle-TableOfContentsItem-level-4 | none | none |
| textDecorationStyle-TableOfContentsItem-level-5 | none | none |
| textDecorationStyle-TableOfContentsItem-level-6 | none | none |
| textDecorationThickness-TableOfContentsItem | none | none |
| textDecorationThickness-TableOfContentsItem-level-1 | none | none |
| textDecorationThickness-TableOfContentsItem-level-2 | none | none |
| textDecorationThickness-TableOfContentsItem-level-3 | none | none |
| textDecorationThickness-TableOfContentsItem-level-4 | none | none |
| textDecorationThickness-TableOfContentsItem-level-5 | none | none |
| textDecorationThickness-TableOfContentsItem-level-6 | none | none |
| textIndent-TableOfContentsItem | none | none |
| textIndent-TableOfContentsItem-level-1 | none | none |
| textIndent-TableOfContentsItem-level-2 | none | none |
| textIndent-TableOfContentsItem-level-3 | none | none |
| textIndent-TableOfContentsItem-level-4 | none | none |
| textIndent-TableOfContentsItem-level-5 | none | none |
| textIndent-TableOfContentsItem-level-6 | none | none |
| textShadow-TableOfContentsItem | none | none |
| textShadow-TableOfContentsItem-level-1 | none | none |
| textShadow-TableOfContentsItem-level-2 | none | none |
| textShadow-TableOfContentsItem-level-3 | none | none |
| textShadow-TableOfContentsItem-level-4 | none | none |
| textShadow-TableOfContentsItem-level-5 | none | none |
| textShadow-TableOfContentsItem-level-6 | none | none |
| textTransform-TableOfContentsItem | none | none |
| textTransform-TableOfContentsItem-level-1 | none | none |
| textTransform-TableOfContentsItem-level-2 | none | none |
| textTransform-TableOfContentsItem-level-3 | none | none |
| textTransform-TableOfContentsItem-level-4 | none | none |
| textTransform-TableOfContentsItem-level-5 | none | none |
| textTransform-TableOfContentsItem-level-6 | none | none |
| textUnderlineOffset-TableOfContentsItem | none | none |
| textUnderlineOffset-TableOfContentsItem-level-1 | none | none |
| textUnderlineOffset-TableOfContentsItem-level-2 | none | none |
| textUnderlineOffset-TableOfContentsItem-level-3 | none | none |
| textUnderlineOffset-TableOfContentsItem-level-4 | none | none |
| textUnderlineOffset-TableOfContentsItem-level-5 | none | none |
| textUnderlineOffset-TableOfContentsItem-level-6 | none | none |
| verticalAlign-TableOfContentsItem | baseline | baseline |
| width-TableOfContents | auto | auto |
| wordBreak-TableOfContentsItem | none | none |
| wordBreak-TableOfContentsItem-level-1 | none | none |
| wordBreak-TableOfContentsItem-level-2 | none | none |
| wordBreak-TableOfContentsItem-level-3 | none | none |
| wordBreak-TableOfContentsItem-level-4 | none | none |
| wordBreak-TableOfContentsItem-level-5 | none | none |
| wordBreak-TableOfContentsItem-level-6 | none | none |
| wordSpacing-TableOfContentsItem | none | none |
| wordSpacing-TableOfContentsItem-level-1 | none | none |
| wordSpacing-TableOfContentsItem-level-2 | none | none |
| wordSpacing-TableOfContentsItem-level-3 | none | none |
| wordSpacing-TableOfContentsItem-level-4 | none | none |
| wordSpacing-TableOfContentsItem-level-5 | none | none |
| wordSpacing-TableOfContentsItem-level-6 | none | none |
| wordWrap-TableOfContentsItem | none | none |
| wordWrap-TableOfContentsItem-level-1 | none | none |
| wordWrap-TableOfContentsItem-level-2 | none | none |
| wordWrap-TableOfContentsItem-level-3 | none | none |
| wordWrap-TableOfContentsItem-level-4 | none | none |
| wordWrap-TableOfContentsItem-level-5 | none | none |
| wordWrap-TableOfContentsItem-level-6 | none | none |
| writingMode-TableOfContentsItem | none | none |
| writingMode-TableOfContentsItem-level-1 | none | none |
| writingMode-TableOfContentsItem-level-2 | none | none |
| writingMode-TableOfContentsItem-level-3 | none | none |
| writingMode-TableOfContentsItem-level-4 | none | none |
| writingMode-TableOfContentsItem-level-5 | none | none |
| writingMode-TableOfContentsItem-level-6 | none | none |