get sidebar list via api

[cht132]

just want to know how to modify sidebars.js to get sidebar item from api.. thanks

[Advait251206]

You can’t directly fetch sidebar items from an API inside sidebars.js.

That file is executed at build time in Node.js, not in the browser, so:

• ❌ no fetch() (unless polyfilled)
• ❌ no runtime API calls
• ❌ no async sidebar config support

Docusaurus requires the sidebar to be synchronous and static.

---

✅ Correct ways to achieve API-driven sidebars

Option 1 — Generate sidebars.js from API (recommended)

Instead of calling the API inside Docusaurus, you:

Fetch API → generate file → then Docusaurus reads it

Example script:

// scripts/generate-sidebars.js

const fs = require('fs');

async function run() {
  const res = await fetch('https://your-api.com/sidebar');
  const data = await res.json();

  const sidebarConfig = {
    docs: data.map((item) => ({
      type: 'doc',
      id: item.id,
      label: item.title,
    })),
  };

  fs.writeFileSync(
    './sidebars.js',
    'module.exports = ' + JSON.stringify(sidebarConfig, null, 2)
  );

  console.log('Sidebar generated');
}

run();

Then update package.json:

{
  "scripts": {
    "prebuild": "node scripts/generate-sidebars.js",
    "build": "docusaurus build"
  }
}

---

Option 2 — Use generated docs plugin structure

If your API returns structured docs, you can:

• generate Markdown files
• auto-generate sidebar from filesystem

In docusaurus.config.js:

docs: {
  sidebarPath: require.resolve('./sidebars.js'),
  routeBasePath: 'docs',
}

Then use:

npx docusaurus write-sidebar

(or custom generator)

---

Option 3 — Custom plugin (advanced)

You can fetch API data inside a plugin:

module.exports = function sidebarPlugin() {
  return {
    name: 'sidebar-plugin',

    async loadContent() {
      const res = await fetch('https://api.example.com/sidebar');
      return res.json();
    },

    async contentLoaded({ content, actions }) {
      const { setGlobalData } = actions;

      setGlobalData({
        sidebar: content,
      });
    },
  };
};

Then consume via React theme components.

⚠️ But this does NOT replace sidebars.js — it only helps UI.

---

❌ What you cannot do

You cannot:

// ❌ NOT supported
module.exports = async function () {
  const res = await fetch(API);
  return res.json();
};

Because:

• Docusaurus expects synchronous sidebar config
• Node build process blocks async config loading

---

🧠 Best practice

Goal	Solution
Dynamic sidebar from API	generate sidebars.js before build
CMS-driven docs	generate Markdown + auto sidebar
Runtime sidebar changes	use plugin + React UI only

---

🚀 Summary

👉 You cannot fetch sidebar data directly inside sidebars.js.

The correct pattern is:

✔ Fetch API BEFORE build
✔ Generate static sidebars.js file
✔ Let Docusaurus consume it normally

---

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206