Docscn

Sidebar tabs

Switch between root folders of the page tree.

Installation

npx shadcn@latest add @docscn/sidebar-tabs

Usage

Mark folders as root folders in their meta.json:

content/docs/guides/meta.json
{
  "title": "Guides",
  "description": "Learn the basics",
  "root": true
}

DocsLayout then shows a dropdown at the top of the sidebar to switch between them, built on shadcn/ui dropdown-menu. Only the current root folder's pages show in the sidebar.

Customise the tabs with the layout's tabs option: an array of LayoutTab (title, url, icon, description), { transform } to change the generated tabs, or false to turn them off.

getSidebarTabs(tree) and SidebarTabsDropdown are exported for custom layouts.

Sidebar

Render a Fumadocs page tree with the shadcn/ui sidebar.

Table of contents

The table of contents that follows the headings in view.

On this page

InstallationUsage