Docs Nav
A recursive documentation sidebar nav with unlimited nesting depth, plus a helper to build it automatically from markdown headings.
Nav + content layout
Publishing
This is where a real page's content would render, right next to the nav, exactly how you'd use DocsNav in an actual docs layout.
Publishing
This is where a real page's content would render, right next to the nav, exactly how you'd use DocsNav in an actual docs layout.
Markdown + scroll to heading
Introduction
Welcome to the docs. This short intro is here so the section has something to scroll past.
Installation
Run npm install to get started, then import the component wherever you need it.
Requirements
You'll need a recent version of Node and a project that already has Tailwind set up.
Usage
Import the component and render it like any other. Filler text below so scrolling actually has
some distance to travel before landing on the next heading.
Examples
Here's a short example section, just to give the nav a few more targets to jump to.
Introduction
Welcome to the docs. This short intro is here so the section has something to scroll past.
Installation
Run npm install to get started, then import the component wherever you need it.
Requirements
You'll need a recent version of Node and a project that already has Tailwind set up.
Usage
Import the component and render it like any other. Filler text below so scrolling actually has
some distance to travel before landing on the next heading.
Examples
Here's a short example section, just to give the nav a few more targets to jump to.
Live markdown editor
npx shadcn add @ectopcoi-components/docs-nav