❤️ Support our project - Your donation helps us continue developing awesome tools!

StarStar on GitHub

Docs

Table of Contents

Table of Contents

A list for the content of a document.

Table of Contents
First Section
Second Section
Third Section

Installation

Run the following command:

npx nyxb@latest add toc

Usage

import {
  TableOfContentsItem,
  TableOfContentsLink,
  TableOfContentsList,
} from "../ui/toc"
 
export default function TOCExample() {
  return (
    <TableOfContentsList>
      <TableOfContentsItem>
        <TableOfContentsLink href="#first-section">
          First Section
        </TableOfContentsLink>
      </TableOfContentsItem>
      <TableOfContentsItem>
        <TableOfContentsLink href="#second-section">
          Second Section
        </TableOfContentsLink>
      </TableOfContentsItem>
      <TableOfContentsItem>
        <TableOfContentsLink href="#third-section">
          Third Section
        </TableOfContentsLink>
      </TableOfContentsItem>
    </TableOfContentsList>
  )
}

Examples

Simple

Table of Contents
First Section
Second Section
Third Section

Nested

You can place a list inside of another list to create a nested table of contents.

Nested Table of Contents
First Section
- Second Nested Section
Third Section

Active Item

A link can be set to active if the user is currently viewing the section it links to.

When setting the isActive prop to true on the TableOfContentsLink component, it will be styled as the active item.

Active Item Table of Contents
First Section
Second Section
Third Section

Contribute