Devmont Digital

Devmont TOC Navigator makes it easy to add a clean, accessible table of contents to your posts and pages.
Features: 
– Shortcode [dtocn_toc] and Gutenberg block 
– Sticky TOC with smooth offset scrolling and active link highlighting 
– Collapsible header with rotating icon 
– Fine-grained styling controls (Header, Links, Container) 
– Inline CSS generation for optimal performance 
– Sanitized settings and safe escaping following WordPress standards
<h4>Shortcode</h4>
[dtocn_toc]
Attributes: 
– heading_levels: Comma-separated list of headings to include (e.g. h2,h3,h4). Default: h2,h3 
– float: none | left | right. Default: none 
– toc_sticky: yes | no. Default: no
Example: 
[dtocn_toc heading_levels=”h2,h3,h4″ float=”right” toc_sticky=”yes”]
<h4>Block</h4>
Adds a “Smart TOC” block with the same options as the shortcode.
<h4>Accessibility</h4>
<ul>
<li>Uses semantic buttons and aria attributes for the accordion toggle</li>
<li>Screen-reader-only label for the heading level data</li>
</ul>

Devmont TOC Navigator

Add a fast, accessible table of contents with a collapsible header, scroll spy, block, and shortcode.

James Kemp

Simply use the <code>[toc content=".your-container"]</code> shortcode to automatically generate a table of contents for any HTML container.
The shortcode accepts a number of parameters:
<ul>
<li><code>content</code> string required 
A CSS selector indicating the container of your content.</li>
<li><code>headers</code> string 
A comma separated list of heading selectors that you want to include.</li>
<li><code>speed</code> int 
Speed of sliding back to top.</li>
<li><code>anchor-class</code> string 
Class of anchor links.</li>
<li><code>anchor-text</code> string 
Prepended or appended to anchor headings. Leave blank to disable anchor links.</li>
<li><code>top_class</code> string 
Back to top button or link class.</li>
<li><code>spy</code> true/false 
Enable scroll spy. This will highlight the list items as you scroll past them.</li>
<li><code>position</code> append/prepend 
Position of anchor text.</li>
<li><code>spy-offset</code> int 
Specify heading offset for spy scrolling.</li>
</ul>

Shortcode Table of Contents

Display an automated table of contents via shortcode.

Devmont TOC Navigator vs Shortcode Table of Contents