Navigation Sidebar

Builds a sidebar navigation tree from an Astro content collection. Handles nested directories, folder expansion, active-page highlighting, overview pages, and order / hidden frontmatter fields. Requires Tailwind CSS.

Current version: 1.0.0 --npm

Installation

$ npm install astro-better-docs-sidebar

Folder behavior modes

folderBehavior controls what happens when a folder has an index.md(x) file:

• page (default): the folder node links to the index page directly
• unclickable: the folder node is a label with no link; only children are clickable
• overview: an “Overview” link is auto-generated as the first child

Style the sidebar container

The sidebar requires Tailwind for its internal <style> block. Wrap it in an <aside> with the aside class, or let it render inline.

Setup

Define your content collection

In src/content/config.ts, include order, hidden, and sidebar fields:

import { defineCollection, z } from 'astro:content';

const docs = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    order: z.number().optional(),
    hidden: z.boolean().optional(),
    route: z.boolean().optional(),
    sidebar: z.object({
      label: z.string().optional(),
      folderBehavior: z.enum(['page', 'unclickable', 'overview']).optional(),
    }).optional(),
  }),
});

export const collections = { docs };

Add the Sidebar to your layout

---
import Sidebar from 'astro-better-docs-sidebar/Sidebar.astro';
import { getCollection } from 'astro:content';

const docsCollection = await getCollection('docs');
---
<Sidebar
  frontmatter={Astro.props}
  collection={docsCollection}
  basePath="/"
/>

Props

Frontmatter fields