Easy Table of Contents 1.0 is a content plugin for Joomla 4, 5, and 6 that builds a navigable table of contents from article headings. Visitors jump to sections with smooth scroll, optional scroll-spy highlighting, and sticky orientation on long pages.

Version 1.0 uses a modern Joomla stack: service provider, namespaced helper, Web Asset Manager assets, and vanilla JavaScript. No template override is required for the default experience. Markup is scoped under the jx-etoc root class.

Highlights

• Auto insert or {easy_toc} / {toc} shortcode placement
• Five layouts: List, Flat, Numbered, Compact, Cards
• Five themes: Classic, Soft, Bold, Minimal, Glass
• Sticky TOC (desktop), scroll-spy, smooth scroll, and scroll offset
• Collapsible panel and optional back-to-top link
• Heading level range, exclude class, category and article filters
• Joomla 4 / 5 / 6 compatible, no jQuery

Download

Email: After purchasing from our store, you receive an email with the download link.

Store: You can also download from the Downloads section. Use the same email address you used when purchasing.

Package: EasyTableOfContents_UNZIP.zip

Unzip the Package

• Unzip EasyTableOfContents_UNZIP.zip.
• Inside you will find:
  • plg_content_easy_toc_1.0.1.zip: install this for Joomla 4, 5 & 6
  • ReadMe.txt: notes for the current version

Install

1. Open System > Install > Extensions.
2. Upload plg_content_easy_toc_1.0.1.zip.
3. Open System > Plugins, find Content - Easy Table of Contents, and set Status to Enabled.
4. Open an article that already uses H2 and H3 headings.
5. Clear Joomla cache and view the article on the front end.

Requirements

• Joomla 4, 5, or 6
• PHP 8.1 or later recommended
• Articles that use heading tags (H2 or deeper by default)

Open System > Plugins > Content - Easy Table of Contents.

• Auto Insert (default: Yes): insert a TOC when the article has enough headings. Turn Off and set Insert Position to None when you only want shortcode placement.
• Insert Position (default: Before content):
  • Before content: TOC at the start of the article body
  • After read more: TOC after the intro / read-more split when present
  • None (shortcode only): no auto insert; use {easy_toc} or {toc}
• Minimum Headings (default: 2): skip the TOC when fewer headings match your level range
• Title: panel heading text. Leave empty for the default On this page
• Show Title (default: Yes)
• Contexts (default: Articles): Articles, Category blog items, and/or Featured items

When a shortcode is present in the article body, Easy TOC replaces that token and does not also auto-insert a second outline in the same body.

• Minimum Heading Level (default: H2): lowest heading included in the outline
• Maximum Heading Level (default: H4): highest heading included
• Exclude Class (default: no-toc): headings with this CSS class are skipped

Example exclude markup:

<h3 class="no-toc">Hidden from TOC</h3>

The plugin adds unique heading IDs when a heading does not already have one, so jump links stay stable. Prefer clear, descriptive headings: readers scan the TOC before they commit to the full article.

• Layout (default: List):
  • List: nested hierarchy that matches heading levels
  • Flat: single-level list of every included heading
  • Numbered: 1 / 1.1 style markers for guides and docs
  • Compact: quieter outline for dense pages
  • Cards: larger tap targets for mobile reading
• Theme (default: Classic): Classic, Soft, Bold, Minimal, Glass
• Collapsible (default: No): show a toggle to open and close the outline
• Start Collapsed (default: No): begin closed when Collapsible is Yes
• Sticky (default: No): keep the TOC visible while scrolling on desktop (off under 768px). Works even on templates with overflow wrappers such as Helix Ultimate
• Scroll Spy (default: Yes): highlight the section currently in view
• Smooth Scroll (default: Yes): animated jump to the target heading. Respects prefers-reduced-motion
• Scroll Offset (px) (default: 80): extra space under sticky site headers when jumping
• Back to Top Link (default: No): optional link at the bottom of the TOC

• Accent Color (default: #1819ed): active links and highlights
• Text Color (default: #0f172a)
• Muted Text Color (default: #64748b)
• Panel Background (default: #ffffff)
• Border Color (default: rgba(15,23,42,0.12)): solid colour or rgba value
• Border Radius (px) (default: 12)
• Drop Shadow (default: Yes)
• Max Width (default: 100%): for example 480px or 100%

Theme presets change the overall look. Appearance colours still apply on every theme.

• Only Categories: comma-separated category IDs. Empty means all categories
• Exclude Categories: comma-separated category IDs to skip
• Only Articles: comma-separated article IDs
• Exclude Articles: comma-separated article IDs to skip
• Extra CSS: optional rules for this plugin. Unsafe patterns such as script tags, expression(), javascript:, and @import are stripped

Use filters when only documentation or blog categories should show a TOC, while marketing landing pages stay clean.

Place {easy_toc} or {toc} where the outline should appear. Optional attributes override plugin defaults for that article. Use double quotes around values.

{easy_toc}
{toc}
{easy_toc layout="numbered" theme="bold" title="Contents"}
{easy_toc layout="compact" theme="minimal" sticky="1" scroll_spy="1"}
{easy_toc collapsible="1" collapsed="0" title="Quick links"}

Common attributes:

• layout: list, flat, numbered, compact, cards
• theme: classic, soft, bold, minimal, glass
• title, show_title
• sticky, scroll_spy, smooth_scroll, scroll_offset
• collapsible, collapsed, back_to_top
• min_level, max_level, min_headings

For mid-article placement, write a short lead, then insert the shortcode, then continue with H2 sections. Set Insert Position to None when every TOC should come from a shortcode only.

General

• Auto Insert
• Insert Position
• Minimum Headings
• Title / Show Title
• Contexts

Headings

• Minimum Heading Level
• Maximum Heading Level
• Exclude Class

Layout

• Layout / Theme
• Collapsible / Start Collapsed
• Sticky / Scroll Spy / Smooth Scroll
• Scroll Offset
• Back to Top Link

Appearance

• Accent / Text / Muted / Panel / Border colours
• Border Radius
• Drop Shadow
• Max Width

Filters

• Only / Exclude Categories
• Only / Exclude Articles
• Extra CSS

• No TOC appears

  • Enable the plugin. Confirm the article has enough headings inside the configured min/max levels. Check Minimum Headings. Confirm Contexts includes the current view. Clear cache.

• Jump lands under the sticky header

  • Increase Scroll Offset until the heading sits comfortably below your site chrome (often 80 to 120).

• Sticky does not stay in view

  • Confirm Sticky is Yes and you are on a desktop width (768px or wider). Use package 1.0.1 or newer so sticky pins correctly on templates with overflow wrappers. Hard-refresh so easy-toc.js?1.0.1 loads.

• Two TOCs on one article

  • Remove the shortcode, or set Insert Position to None when using shortcodes only. A shortcode replaces auto-insert for that article body.

• A heading should not appear in the outline

  • Add class no-toc (or your configured Exclude Class) to that heading.

• Old look after upgrade

  • Clear Joomla and browser cache. Confirm assets load as easy-toc.css?1.0.1 and easy-toc.js?1.0.1 (or newer).

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6. PHP 8.1 or later is recommended.

• Does it work without shortcodes?

  • Yes. With Auto Insert enabled, the plugin adds a TOC when the article has enough headings.

• Can I place the TOC mid-article?

  • Yes. Insert {easy_toc} where you want it, or set Insert Position to None for shortcode-only sites.

• Does it require jQuery?

  • No. Easy Table of Contents uses vanilla JavaScript and the Web Asset Manager.

• What is the customer download package?

  • EasyTableOfContents_UNZIP.zip. Unzip it, then install plg_content_easy_toc_1.0.1.zip.

• Where can I get help?

  • Visit support.joomlax.com.