Is it possible to have tab based doc layout ?

[akrpersonified]

I want something like this in mantine docs : [https://mantine.dev/core/menu/](mantine example) . The whole page is divided into tabs and the "the table of contents" also changes when you change the tab. It seems that they create a new route when tab changes and they re render the whole page. Is it possible to have sth like this. Currently , I can create tabs but the right hand side bar "on this page" doesn't change when we change the tabs. Is there any way to implement this in fuma because it will help a lot as I can contain more information in one page ?

[fuma-nama]

You can render different stuffs on page.tsx based on the tab (page.file.path)

[akrpersonified]

Thanks! I think by page.tsx you meant the one inside docs/[[...slug]]] . When I access {page.file.path} in page.tsx, I get the same mdx file, even after changing the tab.

[fuma-nama]

Changing the tab should lead you to another url/page, it shouldn't be the same, could you clarify the usage?

Usually you don't divide a page, instead, you make multiple pages in a folder, that you can switch between using sidebar, or tabs (and even your custom React components too! It is just Next.js)

[akrpersonified]

I am worried about the number of mdx files. This way I can have more data in single .mdx file. But, It looks like antipattern. I am making an educational content website..Hence, the no. of files can go well beyond 1000. Is there a way that I can store .mdx files in a database and still get the same functionality ? If yes, then could u please point me to any example repo if u have. Also, I think implementing search will be difficult in case we want to go by database route.

[fuma-nama]

I think you would be more interested about using a CMS instead of MDX if you worry about the file size, MDX files need to be compiled ahead of time and (at least) stored somewhere in the bundle, CMS won't have such problems and you can get a nice experience on publishing content (real-time update without rebuilding site).

See our examples:

• BaseHub: https://github.com/fuma-nama/fumadocs-basehub
• Sanity: https://github.com/fuma-nama/fumadocs-sanity

[fuma-nama]

Also if you want to continue using MDX, you can do it like: https://www.assistant-ui.com/docs/runtimes/langgraph/tutorial/introduction