Inline Table of Content

Navigation 7

About

A collapsible table of contents component that displays a hierarchical list of page sections. Features - Collapsible interface - Hierarchical indentation - Smooth animations - Keyboard navigation - Screen reader support - Customizable title - URL hash navigation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Inline Table of Content to your project and fits it to your theme.

Code

How Inline Table of Content is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TableOfContents } from "@/components/ui/inline-toc"

function TableOfContentsDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-start bg-transparent p-4">
      <div className="w-[400px]">
        <TableOfContents
          items={[
            { title: "Introduction", url: "#introduction", depth: 1 },
            { title: "Getting Started", url: "#getting-started", depth: 2 },
            { title: "Installation", url: "#installation", depth: 3 },
            { title: "Configuration", url: "#configuration", depth: 3 },
            { title: "Usage", url: "#usage", depth: 2 },
            { title: "Examples", url: "#examples", depth: 2 },
            { title: "API Reference", url: "#api", depth: 1 },
          ]}
          className="w-full"
        />
      </div>
    </div>
  )
}

export { TableOfContentsDemo }