# Fumadocs UI (the default theme of Fumadocs): インライン目次
URL: /ja/docs/ui/components/inline-toc
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/inline-toc.ja.mdx

ドキュメントにインライン目次を追加します

Install to your codebase:

```bash
npx @fumadocs/cli@latest add inline-toc
```

## 使い方 [#usage]

MDX コンテンツ内で使用できます。Fumadocs MDX の MDX ファイルでは、`toc` エクスポートはページの props を受け取る関数になります。

```mdx title="content.mdx"
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';

<InlineTOC items={toc(props)}>Table of Contents</InlineTOC>
```

または、すべてのページに追加することもできます。

```tsx title="page.tsx"
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';

export default function Page() {
  // ...
  return (
    <DocsPage>
      {/* [!code ++] */}
      <InlineTOC items={page.data.toc}>Table of Contents</InlineTOC>
    </DocsPage>
  );
}
```

## リファレンス [#reference]

### InlineTOCProps

| Prop            | Type                                                                                                                                         | Description                                                                                                                                                                               |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `render?`       | `ComponentRenderFn<HTMLProps, CollapsibleRootState> \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| `open?`         | `boolean \| undefined`                                                                                                                       | Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.                                                               |
| `defaultOpen?`  | `boolean \| undefined`                                                                                                                       | Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead. Default: `false`                                                        |
| `onOpenChange?` | `((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void) \| undefined`                                                    | Event handler called when the panel is opened or closed.                                                                                                                                  |
| `disabled?`     | `boolean \| undefined`                                                                                                                       | Whether the component should ignore user interaction. Default: `false`                                                                                                                    |
| `items`         | `TOCItemType[]`                                                                                                                              |                                                                                                                                                                                           |