diff --git a/docs/api/doc-blocks/doc-block-tableofcontents.mdx b/docs/api/doc-blocks/doc-block-tableofcontents.mdx new file mode 100644 index 000000000000..cce9ea1c3c16 --- /dev/null +++ b/docs/api/doc-blocks/doc-block-tableofcontents.mdx @@ -0,0 +1,96 @@ +--- +title: 'TableOfContents' +sidebar: + order: 18 + title: TableOfContents +--- + +The `TableOfContents` doc block displays an automatically generated list of links to other headings on the current page in the format of a table. + + + To use the storybook "sidebar" table of contents layout, it should be configured with `parameters.docs.toc` + + +{/* prettier-ignore-start */} + +```md title="TableOfContentsDocs.mdx" +import { Meta, TableOfContents } from '@storybook/addon-docs/blocks'; + + + +## Table of Contents + + + +## Section 1 + +## Section 2 + +``` + +{/* prettier-ignore-end */} + +### `TableOfContents` + +```js +import { TableOfContents } from '@storybook/addon-docs/blocks'; +``` + +TableOfContents accepts the following props: + +### `title` + +Type: `string | JSX.Element` + +Determine the title to be displayed above the table of contents. + + +### `disable` + +Type: `boolean` + +When set to `true` prevents the rendering of the table. + + +### `headingSelector` + +Type: `string` +Default: `h3` + +CSS selector to determine which headings to include in the table of contents. + +### `contentsSelector` + +Type: `string` +Default: `.sbdocs-content` + +CSS selector to determine the container that holds the content to be scanned for headings. + +### `ignoreSelector` + +Type: `string` +Default: `.docs-story *, .skip-toc` + +CSS selector to determine which elements to ignore when scanning for headings. + +### `className` + +Type: `string` + +Apply custom CSS classes to the table of contents' wrapping element. + +### `unsafeTocbotOptions` + +Type: `object` + +Additional options to be passed directly to the underlying Tocbot. +Use as an escape hatch for features not yet supported by the TableOfContents component. + +### `channel` + +Type: `Channel` + +Storybook's event channel to be used for navigation when clicking items in the table. +This is automatically injected so does not need to be set up manually. + + diff --git a/docs/writing-docs/doc-blocks.mdx b/docs/writing-docs/doc-blocks.mdx index cd360b99ce0d..46a29eb64dc4 100644 --- a/docs/writing-docs/doc-blocks.mdx +++ b/docs/writing-docs/doc-blocks.mdx @@ -240,6 +240,16 @@ The `Subtitle` block can serve as a secondary heading for your docs entry. ![Screenshot of Subtitle block](../_assets/api/doc-block-title-subtitle-description.png) +### [TableOfContents](../api/doc-blocks/doc-block-tableofcontents.mdx) + + + + Accepts parameters in the namespace `parameters.docs.toc`. + + + +The `TableOfContents` block displays a list of the contents for the current docs page automatically formatted as a table. + ### [Title](../api/doc-blocks/doc-block-title.mdx) The `Title` block serves as the primary heading for your docs entry. It is typically used to provide the component or page name.