bit-docs-html-toc

A table of contents for use with bit-docs-generate-html.

Use

To use, add bit-docs-html-toc to your bit-docs dependencies in package.json:

{
  ...

  "bit-docs": {
    "dependencies": {
      "bit-docs-html-toc": "$VERSION"
    }
  }
}

Where $VERSION is the latest version on npm.

In your template add a <bit-toc> element:

<bit-toc></bit-toc>

Attributes

<bit-toc> supports the following attributes:

heading-container-selector

By default, all heading tags children of the first article tag on the page will be collected to create the table of contents; if you want to use a different element just do:

<bit-toc
  heading-container-selector="#my-custom-selector"
>
</bit-toc>

The table of contents will be injected into this element at run time.

depth

By default, only h2 elements are collected. You can change to include <h3> elements by setting depth like:

<bit-toc depth="2"></bit-toc>

Alternatively, the number of child headers that will be included in the TOC, use the @outline tag like so:

@outline 2

child-tag

If you want <li>'s to be within an <ol> instead of a <ul>, this can be configured like:

<bit-toc child-tag="ol"></bit-toc>

scroll-selector

If present, will scroll the <bit-toc> element with the heading-container-selector:

<bit-toc scroll-selector></bit-toc>

scroll-selector can also be set to some other element to scroll:

<bit-toc scroll-selector="#some-parent"></bit-toc>

Methods

Call .highlight() to force an update of the active or completed class names on the <li> elements:

document.querySelector("bit-toc").highlight()

This happens automatically when the heading-container-selector element is scrolled.