astro-toc

astro-toc

Table of Contents (ToC) generator for Astro

Table of Contents

• Install
• Usage
• License

Install

npm install astro-toc

Usage

Classic

This render mode can render your ToC as <ul>, <ol> or <menu>; set the as property to select your flavour.

Property	Type	Description
toc	{ depth: number; title: string; url?: string; [string]: any }[]	depth and title are required.
as optional	string	bullet | number | menu
maxDepth optional	number	How many levels should be rendered

---
import { TOC } from "astro-toc";

const toc = [
  {depth: 1, title: "Tours", url: /* optional*/},
  {depth: 2, title: "Walking Tours"},
  {depth: 3, title: "City Walking Tours"},
  {depth: 3, title: "River Walking Tours"},
  {depth: 2, title: "Boat Tours"},
  {depth: 1, title: "Restaurants"},
  {depth: 2, title: "Fine Dining"},
  {depth: 2, title: "Gastropub"},
  {depth: 2, title: "Fast Food"},
  {depth: 1, title: "Hotels"},
  {depth: 2, title: "Spa Hotels"},
  {depth: 2, title: "Bed & Breakfast"},
];
---

<TOC toc={toc} />

Component

When using a custom component it uses the <menu> element.

Unlike the classic render method title isn't required and the payload will be passed to the component.

Property	Type	Description
toc	{ depth: number; [string]: any }[]	depth is required.
use	(props) => any	Astro component
maxDepth optional	number | string	How many levels should be rendered

---
import { TOC } from "astro-toc";
import MyComponent from "path/to/MyComponent.astro";

const toc = [
  {depth: 1, title: "Tours"},
  {depth: 2, title: "Walking Tours"},
  {depth: 3, title: "City Walking Tours"},
  {depth: 3, title: "River Walking Tours"},
  {depth: 2, title: "Boat Tours"},
  {depth: 1, title: "Restaurants"},
  {depth: 2, title: "Fine Dining"},
  {depth: 2, title: "Gastropub"},
  {depth: 2, title: "Fast Food"},
  {depth: 1, title: "Hotels"},
];
---

<TOC toc={toc} use={MyComponent} />

License

ISC