getToc(options)Get only the table of contents from an MDX file. This is useful for building navigation sidebars or TOC components.
import { getToc } from "@ariadocs/react";
const toc = await getToc({
contentDir: "contents/docs",
slug: "getting-started",
});
options| Property | Type | Required | Description |
|---|---|---|---|
contentDir | string | Yes | Path to the content directory |
slug | string | Yes | File path without .mdx extension |
Returns an array of TocItem objects:
| Property | Type | Description |
|---|---|---|
id | string | Heading ID (for anchor links) |
value | string | Heading text content |
depth | number | Heading level (1-6) |
items | TocItem[] | Nested child items (optional) |
import { getToc } from "@ariadocs/react";
export default async function TableOfContents({
params,
}: {
params: { slug: string };
}) {
const toc = await getToc({
contentDir: "contents/docs",
slug: params.slug,
});
return (
<nav>
<h2>On this page</h2>
<ul>
{toc.map((item) => (
<li key={item.id}>
<a href={`#${item.id}`}>{item.value}</a>
{item.items && item.items.length > 0 && (
<ul>
{item.items.map((child) => (
<li key={child.id}>
<a href={`#${child.id}`}>{child.value}</a>
</li>
))}
</ul>
)}
</li>
))}
</ul>
</nav>
);
}
For deeply nested headings, use a recursive component:
function TocList({ items }: { items: TocItem[] }) {
return (
<ul>
{items.map((item) => (
<li key={item.id}>
<a href={`#${item.id}`}>{item.value}</a>
{item.items && item.items.length > 0 && (
<TocList items={item.items} />
)}
</li>
))}
</ul>
);
}