Docs
Nyx TOC

Nyx TOC

A table of contents component that highlights the current section and shows the document structure.

On This Page

Installation

Run the following command to install the Table of Contents component:

npx nyxb@latest add nyx-toc

Usage

To use the Table of Contents component, import it into your project and pass the required props.

import { TableOfContentsList } from '~/registry/miami/ui/nyx-toc'
 
const items = [
  { title: 'Introduction', url: '#introduction', depth: 1 },
  { title: 'Getting Started', url: '#getting-started', depth: 2 },
  // Add more items as needed
]
 
export default function MyPage() {
  return (
    <div className="w-[240px]">
      <TableOfContentsList 
        items={items}
        label="On This Page"
      />
    </div>
  )
}

Popover Components

The TOC includes popover components for mobile/responsive views:

import { TocPopover, TocPopoverTrigger, TocPopoverContent } from '@nyxb/nyx-toc'
 
export default function TableOfContents({ items }) {
  return (
    <TocPopover>
      <TocPopoverTrigger items={items} />
      <TocPopoverContent>
        <NyxTOCItems items={items} />
      </TocPopoverContent>
    </TocPopover>
  )
}

Advanced Usage

For more control over the TOC behavior, you can use the context providers:

import { AnchorProvider, ScrollProvider } from '@nyxb/nyx-toc'
 
export default function CustomTOC({ items }) {
  const containerRef = useRef(null)
  
  return (
    <ScrollProvider containerRef={containerRef}>
      <AnchorProvider toc={items}>
        <NyxTOCItems items={items} />
      </AnchorProvider>
    </ScrollProvider>
  )
}

Features

  • Automatic scroll syncing with document sections
  • Visual indicator for current section
  • Responsive design with popover support
  • RTL support
  • Customizable styling
  • Nested section support with indentation
  • Smooth scrolling to sections

Custom Styling

You can customize the appearance using standard Tailwind classes:

<NyxTOCItems 
  items={items} 
  className="custom-toc-class"
/>

Examples

Basic Example

On This Page

With Popover (Mobile-Friendly)

Props

TableOfContentsList

PropTypeDescription
itemsTOCItem[]An array of items to display in the table of contents.
isMenubooleanOptional. If true, styles the TOC as a menu.
labelReactNodeOptional. Adds a heading above the TOC items.

TOCItem

PropTypeDescription
titleReact.ReactNodeThe title of the section.
urlstringThe URL or anchor link to the section.
depthnumberThe depth level of the section in the document (1-4).
TOCToggle