WP Manifestindependent plugin directory
manifest / content / carmo-h123-vertical-menu

Carmo H123 Vertical Menu

Example block scaffolded with Create Block tool.

by The WordPress Contributors · github.com/carmopereira/carmo-h123-vertical-menu

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/carmopereira/carmo-h123-vertical-menu/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/carmopereira/carmo-h123-vertical-menu ↗

A vertical navigation menu WordPress block that automatically generates a hierarchical table of contents from H2 and H3 headings on your page, with active highlighting and smooth scrolling.

Description

The Vertical Table of Contents block creates an elegant, fixed-position navigation menu that dynamically scans your page content for H2 and H3 heading elements. It builds a hierarchical menu structure that makes it easy for visitors to navigate long-form content.

Key Features

  • Automatic Detection: Scans the page and finds all H2 and H3 headings
  • Hierarchical Structure: Creates a nested menu showing the relationship between main sections (H2) and subsections (H3)
  • Active Highlighting: Automatically highlights the current section as users scroll through the page
  • Smooth Scrolling: Clicking any menu item smoothly scrolls to that section
  • Sticky Navigation: Remains visible as users scroll down the page
  • Responsive: Optimized for desktop viewing

Perfect For

  • Long blog posts and articles
  • Documentation pages
  • Tutorial content
  • Research papers and white papers
  • Any content with clear hierarchical structure

Installation

  1. Upload the plugin files to the /wp-content/plugins/carmo-h123-vertical-menu directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress
  3. Add the "Carmo H123 Vertical Menu" block to any post or page
  4. The block will automatically detect H2 and H3 headings in your content

Development

Prerequisites

  • Node.js and npm
  • WordPress development environment

Setup

npm install
npm run build

Build Commands

  • npm run build - Build production files
  • npm run start - Start development mode with watch
  • npm run plugin-zip - Create a zip file for distribution

Frequently Asked Questions

Does this work with Heading blocks?

Yes! The block scans the entire page content for H2 and H3 HTML elements, so it works with WordPress Heading blocks and any other content that uses standard heading tags.

Can I customize the styling?

The block includes clean, minimal styling that adapts to most themes. You can add custom CSS to further customize the appearance.

Does it work on mobile devices?

The block is optimized for desktop viewing. On mobile devices, you may want to use WordPress's built-in Table of Contents block instead.

What if my headings don't have IDs?

The block automatically generates IDs for headings that don't have them, ensuring smooth scrolling works for all content.

Changelog

0.1.0

  • Initial release
  • Automatic H2 and H3 detection
  • Hierarchical menu structure
  • Active section highlighting
  • Smooth scroll navigation

License

GPL-2.0-or-later - see LICENSE file for details.

Contributors

The WordPress Contributors