- Table of Contents
- First Section
- Second Section
- Third Section
Installation
Run the following command:
npx nyxbui@latest add tocUsage
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
- 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