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 nyxbui@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
- 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