On This Page
Installation
Run the following command to install the Table of Contents component:
npx nyxb@latest add nyx-tocUsage
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
| Prop | Type | Description |
|---|---|---|
| items | TOCItem[] | An array of items to display in the table of contents. |
| isMenu | boolean | Optional. If true, styles the TOC as a menu. |
| label | ReactNode | Optional. Adds a heading above the TOC items. |
TOCItem
| Prop | Type | Description |
|---|---|---|
| title | React.ReactNode | The title of the section. |
| url | string | The URL or anchor link to the section. |
| depth | number | The depth level of the section in the document (1-4). |