Docsify Sidebar Collapse

A lightweight Docsify plugin that adds collapse/expand toggles to your sidebar sections.

• Collapses/expands second-level sidebar sections with a smooth transition
• Remembers collapsed state across page navigations via localStorage
• Works with default Docsify themes and aims to be compatible with docsify-themable
• Ships both JS and CSS; simply include both to enable it

Note: This plugin is NOT compatible with nested sidebars (untested and not supported). It targets the common single-level section structure generated by Docsify.

Demo

Add the plugin to any Docsify site and the sidebar will gain chevron toggles next to items that contain sublists.

Installation

You can consume this plugin via a CDN or npm.

CDN (recommended for simplicity)

Add the CSS and JS after Docsify in your index.html:

<!-- Docsify core -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>

<!-- Sidebar Collapse plugin -->
<link rel="stylesheet" href="https://unpkg.com/docsify-sidebar-collapse/dist/sidebar-collapse.min.css" />
<script src="https://unpkg.com/docsify-sidebar-collapse/dist/sidebar-collapse.min.js"></script>

<!-- Or via jsDelivr -->
<!--
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-collapse.min.css" />
<script src="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-collapse.min.js"></script>
-->

No further configuration is required. The plugin auto-installs itself by extending window.$docsify.plugins.

npm

Install the package:

npm install docsify-sidebar-collapse
# or
pnpm add docsify-sidebar-collapse
# or
yarn add docsify-sidebar-collapse

Then include the built assets in your index.html (recommended), or serve them from your build pipeline:

<link rel="stylesheet" href="/node_modules/docsify-sidebar-collapse/dist/sidebar-collapse.min.css" />
<script src="/node_modules/docsify-sidebar-collapse/dist/sidebar-collapse.min.js"></script>

If your hosting setup disallows serving from node_modules, copy the files from dist/ into your static assets directory during your build/deploy step.

Usage

Once included, the plugin:

• Adds a chevron toggle before sidebar items that have child lists
• Collapses sections by default; click to expand
• Remembers your choices per section in localStorage

There is no runtime configuration required.

Compatibility

• Docsify: >= 4
• Themes: Works with default themes and with docsify-themable. If your theme customizes the sidebar heavily, ensure the plugin CSS (sidebar-collapse.css) is loaded to provide the necessary layout and transitions.
• Nested sidebars: Not supported (untested). This plugin targets a single level of nesting under each top-level list item.

Known limitations

• The plugin does not currently auto-expand parent sections for active links. It preserves your last collapsed/expanded state instead.

Development

Project layout:

• src/sidebar-collapse.js – the plugin logic
• src/sidebar-collapse.css – the styles for the toggles and animations
• dist/ – built, minified assets generated by the build

Scripts:

npm install
npm run build

This will produce:

• dist/sidebar-collapse.js (copy of source)
• dist/sidebar-collapse.min.js (minified)
• dist/sidebar-collapse.css (copy of source)
• dist/sidebar-collapse.min.css (minified)

The package is configured to build automatically on npm publish.

License

MIT

Acknowledgements

• Built for the excellent Docsify
• Designed to work alongside docsify-themeable