PHPackages doefom/statamic-table-of-contents - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. doefom/statamic-table-of-contents ActiveLibrary[Utility & Helpers](/categories/utility) doefom/statamic-table-of-contents ================================= v2.0.0(2mo ago)812.1k↓26.2%4MITPHPCI passing Since Sep 11Pushed 2mo ago1 watchersCompare [ Source](https://github.com/doefom/statamic-table-of-contents)[ Packagist](https://packagist.org/packages/doefom/statamic-table-of-contents)[ RSS](/packages/doefom-statamic-table-of-contents/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (2)Versions (12)Used By (0) Statamic Table Of Contents ========================== [](#statamic-table-of-contents) > A Statamic addon that generates a table of contents from a bard or markdown field in your antlers templates using a modifiers. 🌟 Features ---------- [](#-features) - ✅ Generate a table of contents from a **bard** or **markdown** field. - ✅ Supports all heading levels (h1 - h6). - ✅ Specify a range of heading levels to include in the table of contents. - ✅ Render the table of contents as an ordered or unordered list. ✅ Compatibility --------------- [](#-compatibility) This addon supports: - **Statamic 5.x** - **Statamic 6.x** The CI pipeline verifies both support lanes with these dependency combinations: - `statamic/cms:^5.0` + `orchestra/testbench:^9.0` + `phpunit/phpunit:^10.5.35` - `statamic/cms:^6.0` + `orchestra/testbench:^10.0` + `phpunit/phpunit:^11.5.3` 🛠 How to Install ---------------- [](#-how-to-install) You can search for this addon in the `Tools > Addons` section of the Statamic control panel and click **install**, or run the following command from your project root: ``` composer require doefom/statamic-table-of-contents ``` 💡 How to Use ------------ [](#-how-to-use) The addon provides two modifiers that you can use anywhere in your antlers templates: 1. `toc`: Generates the markup for a table of contents from a given bard or markdown field 2. `with_ids`: Adds unique IDs to the headings of the rendered html of a given bard or markdown field If you want to learn more about Statamic modifiers in general, make sure to check out the official documentation: ### Basic Usage [](#basic-usage) To generate a table of contents that also links to your rendered content, we use both modifiers like this: ``` {{ content_field | toc }} {{ content_field | with_ids }} ------------------------------------------------------------------------ Ingredients Boil the Pasta Spaghetti only Ingredients ... Boil the Pasta ... Spaghetti only ... ``` Keep in mind that you should **always use both modifiers** together to ensure that the table of contents links to the correct headings. Using only one of the modifiers will probably not produce the desired results. Now let's break down the two modifiers. ### The `toc` Modifier [](#the-toc-modifier) The `toc` modifier generates a table of contents from a given bard or markdown field. ``` {{ content_field | toc }} ``` ``` Ingredients Boil the Pasta Spaghetti only ``` #### Signature of the `toc` Modifier [](#signature-of-the-toc-modifier) By default, the toc modifier will generate an unordered table of contents with all heading levels included. However, you may specify which heading levels to include and whether to render the table of contents as an ordered or unordered list. ``` {{ content_field | toc:min_level:max_level:ordered }} ``` #### Specifying a Range of Heading Levels [](#specifying-a-range-of-heading-levels) You can specify a range of heading levels to be represented in the table of contents (by default, all heading levels from h1 to h6 are included): ``` {{ content_field | toc:2:4 }} ``` This will result in a table of contents that only includes h2, h3, and h4 headings. ### Rendering as an Ordered List [](#rendering-as-an-ordered-list) If you prefer an ordered list instead of an unordered list, you can do this like so: ``` {{ content_field | toc:1:6:true }} ``` ``` Ingredients Boil the Pasta Spaghetti only ``` **Note:** Make sure to provide `min_level` and `max_level` as well if you want to render the table of contents as an ordered list to maintain the correct order of the parameters. #### Options [](#options) ParameterDescriptionDefault`min_level`The minimum heading level to include.`1``max_level`The maximum heading level to include.`6``ordered`Whether to render the table of contents as an ordered list.`false`### The `with_ids` Modifier [](#the-with_ids-modifier) The `with_ids` modifier adds unique IDs to each heading of the rendered html of a given bard or markdown field. ``` {{ content_field | with_ids }} ``` ``` Ingredients ... Boil the Pasta ... Spaghetti only ... ``` #### Duplicate Headings [](#duplicate-headings) It also respects duplicate headings by appending a sequential number to the heading id. ``` Onions ... Chopping ... Carrots ... Chopping ... ``` ### Styling the Table of Contents [](#styling-the-table-of-contents) There is no built-in way to style the table of contents, and therefore it's totally up to you to style it as you see fit. ### Using the Tailwind Typography Plugin [](#using-the-tailwind-typography-plugin) If you use the [Tailwind typography plugin](https://github.com/tailwindlabs/tailwindcss-typography) somewhere in your project, you could style the table of contents by adding the `prose` class to a surrounding element: ``` {{ content_field | toc }} ``` ### Applying Individual Styles [](#applying-individual-styles) Of course, you can also apply individual styles to the table of contents. To do this, you'll probably want to wrap the table of contents in a div as well, apply a class to it, and then style it in your CSS: ``` {{ content_field | toc }} .table-of-contents ul li a { ... } ``` ### Using Custom Layout [](#using-custom-layout) The benefit of this addon is that you have two modifiers, one to generate the table of contents and another one to add unique ids to your headings. This allows you to structure your site however you like. ``` {{ content_field | toc }} {{ content_field | with_ids }} ``` ### Handling Bard Fields with Custom Sets [](#handling-bard-fields-with-custom-sets) If you are using sets in you bard field, you will need to handle things a little differently. #### Generating the Table of Contents [](#generating-the-table-of-contents) You should convert the bard field to HTML first, then decode the HTML entities, and finally apply the `toc` modifier. ``` {{ bard_with_sets | bard_html | decode | toc }} ``` #### Adding unique IDs to the Headings [](#adding-unique-ids-to-the-headings) When looping through the bard field, you should apply the `toc` modifier whenever you handle a text node. ``` {{ bard_with_sets }} {{ if type === 'my_custom_set' }} ... {{ else }} {{ text | with_ids }} {{ /if }} {{ /bard_with_sets }} ``` #### In Combination [](#in-combination) ``` {{ bard_with_sets | bard_html | decode | toc }} {{ bard_with_sets }} {{ if type === 'my_custom_set' }} ... {{ else }} {{ text | with_ids }} {{ /if }} {{ /bard_with_sets }} ``` 🛟 Support --------- [](#-support) This addon is enthusiastically supported because I rely on it myself and I appreciate all feedback for features or issues you encounter using this addon. If you run into any problems, feel free to open an issue on [GitHub](https://github.com/doefom/statamic-table-of-contents/issues). ### Health Score 46 — FairBetter than 93% of packages Maintenance83 Actively maintained with recent releases Popularity34 Limited adoption so far Community11 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 95.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~58 days Recently: every ~130 days Total 10 Last Release 89d ago Major Versions v1.2.5 → v2.0.02026-02-19 ### Community Maintainers ![](https://www.gravatar.com/avatar/08c6d4c6c3af73d0ce3caab9b5531c4334eb97aee4e468c5db2fb8753290d884?d=identicon)[doefom](/maintainers/doefom) --- Top Contributors [![doefom](https://avatars.githubusercontent.com/u/33541715?v=4)](https://github.com/doefom "doefom (21 commits)")[![JoshTristram](https://avatars.githubusercontent.com/u/28419796?v=4)](https://github.com/JoshTristram "JoshTristram (1 commits)") ### Embed Badge ![Health badge](/badges/doefom-statamic-table-of-contents/health.svg) ``` [![Health](https://phpackages.com/badges/doefom-statamic-table-of-contents/health.svg)](https://phpackages.com/packages/doefom-statamic-table-of-contents) ``` ### Alternatives [statamic/ssg Generate static sites with Statamic. 254302.4k](/packages/statamic-ssg)[statamic/seo-pro 65440.7k](/packages/statamic-seo-pro)[jacksleight/statamic-bard-texstyle 17172.5k](/packages/jacksleight-statamic-bard-texstyle)[visuellverstehen/statamic-classify A useful helper to add CSS classes to all HTML tags generated by the bard editor. 20116.8k](/packages/visuellverstehen-statamic-classify)[marcorieser/statamic-livewire A Laravel Livewire integration for Statamic. 2381.5k10](/packages/marcorieser-statamic-livewire)[withcandour/aardvark-seo Save time and get your Statamic site to rank better with the SEO addon for Statamic. 13128.3k](/packages/withcandour-aardvark-seo) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)