FAIR

Federated and Independent Repositories

Devmont TOC Navigator

Plugin Banner

Devmont TOC Navigator

by Devmont Digital

Download
Description

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

Shortcode

[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”]

Block

Adds a “Smart TOC” block with the same options as the shortcode.

Accessibility

  • Uses semantic buttons and aria attributes for the accordion toggle
  • Screen-reader-only label for the heading level data
  1. Upload the plugin files to the /wp-content/plugins/devmont-toc-navigator directory, or install via the Plugins screen in WordPress.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress.
  3. Add the shortcode [dtocn_toc] to your content or insert the Smart TOC block.
  4. Configure styles under Settings Smart TOC.
Can I choose which heading levels to include?

Yes. Set heading_levels like “h2,h3,h4” in the shortcode or block.

Does it support sticky behavior?

Yes. Enable sticky in the shortcode/block. Smooth scrolling accounts for the sticky TOC height.

How do I style the TOC?

Go to Settings Smart TOC Styles. You can customize Header, Links, and Container (colors, fonts, borders, radius, padding, width, box shadow presets, margins, etc.).

1.0.1

  • Compatible with WordPress 7.0.

1.0.0

  • Initial release.
Back to top