Table of Contents

The table of contents component renders a navigation bar on the right of the screen. Users can click on the items in the contents bar to skip to specific headers.

Prop	Data type	Required?	Description
heading	Enum<String>	No	The heading level rendered in the table of contents

Supported headings

• h1
• h2
• h3
• h4
• h5
• h6

Default

By default table of contents only renders <h1> tags

<fw-toc>
  <h1>This is a Table of Contents</h1>
  Content...

  <h1>It automatically generates from headings</h1>
  More content...
</fw-toc>

Custom headings

You can specify the heading level you want to render in the table of contents by passing it to the heading prop.

<fw-toc
  heading="h2"
>
  <h1>This is a Table of Contents</h1>
  Content...

  <h2>It automatically generates from headings</h2>
  More content...
</fw-toc>