Mason James

← PluginsAvailable

Table of Contents

An "On this page" menu built from your headings.

Generate a nested table of contents from post headings in EmDash, as an editor block or a theme component, with smooth scrolling and mobile collapse.

View on npmSource on GitHubHow to install ↓

  • Nested headings

    Supports H1 through H6.

  • Editor block and component

    In the article or in your theme.

  • Smooth scrolling

    With mobile collapse.

  • Per-instance options

    Title, heading levels, selector and style.

Table of Contents turns a post's headings into a nested "On this page" menu. Editors can insert it in an article, and theme authors can place it in a sidebar or header.

Sensible defaults

It lists H2 and H3 headings, appears only when a post has at least three, scrolls smoothly and collapses on small screens. Each instance can override the title, levels and style.

Install

pnpm add emdash-table-of-contents

// astro.config.mjs
import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { tableOfContentsPlugin } from "emdash-table-of-contents";

export default defineConfig({
  integrations: [
    emdash({ plugins: [tableOfContentsPlugin()] }),
  ],
});

Questions

Does it work without JavaScript?

The menu needs JavaScript to build itself, so it stays hidden when scripts are off.

More EmDash plugins

All plugins →