The Toc component is used to display a table of contents with clickable anchor links to different sections of a page. It can be customized with a specific height and width, and can be displayed differently on mobile devices. The component utilizes the Ant Design Anchor component to create the clickable anchor links.

import { Toc } from '@lobehub/ui';

Navigation

Default

Loading preview

APIs

Toc properties

activeKeyTocMobileProps: string
getContainerTocMobileProps: () => AnchorContainer
headerHeightTocMobileProps: number
Defaults to 64.
isMobile: boolean
itemsRequiredTocMobileProps: TocItemType[]
onChangeTocMobileProps: (activeKey: string) => void
tocWidthTocMobileProps: number
Defaults to 176.

TocItemType

Property	Description	Type	Default
id	Unique identifier for the item	`string`	-
title	Display title for the item	`string`	-
children	Child items	`TocItemType[]`	-