https://github.com/markmead/alpinejs-table-of-content
Generate a table of content from headings within an element 📖
https://github.com/markmead/alpinejs-table-of-content
alpinejs alpinejs-directive alpinejs-plugin table-of-contents toc toc-generator
Last synced: 11 months ago
JSON representation
Generate a table of content from headings within an element 📖
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-table-of-content
- Owner: markmead
- License: mit
- Created: 2024-06-08T11:05:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:13:36.000Z (over 1 year ago)
- Last Synced: 2025-07-14T20:09:56.082Z (11 months ago)
- Topics: alpinejs, alpinejs-directive, alpinejs-plugin, table-of-contents, toc, toc-generator
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Table of Content
Generate a table of content from headings within an element 📖
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D alpinejs-table-of-content
npm install -D alpinejs-table-of-content
```
```js
import Alpine from 'alpinejs'
import toc from 'alpinejs-table-of-content'
Alpine.plugin(toc)
Alpine.start()
```
## Example
```html
Heading 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, commodi.
Heading 2
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Heading 3
Lorem, ipsum dolor.
Heading 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sunt alias,
possimus mollitia nisi pariatur vero numquam at iure labore! Labore est
laudantium nam voluptates laborum, inventore delectus dolore placeat impedit
quae?
Heading 3.1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium velit
unde, pariatur dolore, eveniet consectetur eligendi tempora dolor nesciunt
cumque quis repellendus, voluptate perspiciatis eaque quibusdam?
Heading 2.1
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, eaque ratione.
Mollitia placeat vitae voluptas!
Heading 2.2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique minima
harum ipsam!
Heading 3.2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni a est porro
facilis nam commodi ullam fugiat? Quisquam reprehenderit incidunt sint ad
facilis ducimus est rerum? Non commodi tempore provident.
```
All you need is the `x-table-of-content` directive and a `tableOfContent: []`
within the `x-data` of the same element. Exactly as shown in the example.
From there, Alpine JS will read the content within the element with the
`x-table-of-content` directive and locate all the H2, H3 and H4 elements.
Generating a nested array of objects which parent and child relationships.
Within these objects you'll have:
- `headingId` (Comes from the `id` attribute on the heading - Useful for jump
links)
- `headingChildren` (If the heading has child headings, these will appear here)
- `textContent` (The text content of the heading)
In the example above there is this piece of HTML:
```html
```
This is looping through the `tableOfContent` and generating the nested list for
the user to use to jump to, or just view the headings within the content.
_This example uses Tailwind CSS, this is not required._
## Stats
