❤️ Support our project - Your donation helps us continue developing awesome tools!
Docs
Table of Contents

Table of Contents

A list for the content of a document.

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

Nested

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

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.

ToastToggle