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

[muhammad-fiaz]

Hello @akrpersonified and @fuma-nama

you can simply make it by
app/docs/layout.tsx

import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';
import { AlbumIcon, Heart, LayoutTemplate, MessageCircle } from 'lucide-react';
import { baseOptions } from '@/app/layout.config';
import 'fumadocs-twoslash/twoslash.css';
import { source } from '@/lib/source';
import { AlbumIcon, Heart, LayoutTemplate, MessageCircle } from 'lucide-react';

// Define the sidebar tabs and dynamic transformation logic
const sidebarTabs = [
  {
    text: 'Home of Docs', 
    url: '/docs',
    title: 'Home of Docs',
    description: 'Home of Docs',
    icon: <AlbumIcon size={24} />, // sample icon
  },
  {
    text: 'projectname',
    url: '/docs/projectname',
    title: 'projectname',
    description: 'name of project',
    icon: <AlbumIcon size={24} />, //sample icon only
  },
];

const docsOptions: DocsLayoutProps = {
  ...baseOptions,
  tree: source.pageTree,
  links: sidebarTabs,
  sidebar: {
    tabs: {
    transform(option, node) {
      const meta = source.getNodeMeta(node);
      if (!meta) return option;


      return {
        ...option,
        icon: (
          <div
            className="rounded-md border bg-gradient-to-t from-fd-background/80 p-1 shadow-md [&_svg]:size-5"
            style={{
              color: `hsl(var(--${meta.file.dirname}-color))`,
              backgroundColor: `hsl(var(--${meta.file.dirname}-color)/.3)`,
            }}
          >
            {node.icon}
          </div>
        ),
      };
    },
    }
  },
};

export default function Layout({ children }: { children: ReactNode }) {
  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
}

then the content folder should be like

content/
└── docs/
    ├── meta.json                # Metadata for the entire documentation
    ├── index.mdx                # Main documentation file
    └── project-name-folder/     # Folder for a specific project
        ├── meta.json            # Metadata for the project
        ├── v1/                  # Folder for version 1 of the project
        │   ├── file1.mdx        # MDX file for version 1
        │   ├── file2.mdx        # Another MDX file for version 1
        │   └── ...              # Additional files for version 1
        ├── v2/                  # Folder for version 2 of the project
        │   ├── file1.mdx        # MDX file for version 2
        │   ├── file2.mdx        # Another MDX file for version 2
        │   └── ...              # Additional files for version 2
        └── v3/                  # Folder for version 3 of the project
            ├── file1.mdx        # MDX file for version 3
            ├── file2.mdx        # Another MDX file for version 3
            └── ...              # Additional files for version 3

content/docs/meta.json

{
  "title": "Getting Started",
  "description": "A Brief Introduction on how to get started!",
  "icon": "Building2",
  "root": true,
  "pages": [
    "---Introduction---",
    "index", #home of docs
    "other"# here you should include all the home mdx by comma separation
    "---Projects---", # group the projects
    "...",                    #load all the mdx files

  ]
}

content/docs/project-name-folder/meta.json

{
  "title": "Getting Started",
  "description": "A Brief Introduction on how to get started!",
  "icon": "Building2",
  "root": true,
  "pages": [
    "---Introduction---",
    "index", #home of your project 
    "---Project Versions---", # group the projects
    "...",                    # this will load all the project versions under project versions and when you click this will display that version
                              # make sure to add all versions under separate folders under the  project name folder and include those in meta.json
  ]
}

I hope this helps :)

[akrpersonified]

Are u sure that it will help in reducing the no. of mdx files ? also, I don't want tabs in sidebar. I want sth like this: https://mantine.dev/core/menu/ .You can see there are three tabs: Documentation, props and style API on the same page.

[muhammad-fiaz]

Hello @akrpersonified

to reduce the no of mdx u have to organize accordingly but from what i saw in your previous comments u asked for reducing mdx by using db. For that yes you can store but it some times makes thinks not easy to manage and edit btw if you don't like tabs you can make it false itself in sidebar component props and for the tabs feature u said i believe u can make that by a new custom tabs component and import that in mdx to overlap the content you want to be in tabs with any ui framework like https://www.heroui.com/docs/components/tabs or else simply use the fumadocs builtin https://fumadocs.vercel.app/docs/ui/components/tabs

i hope this helps :)

[akrpersonified]

Thanks! I have still not looked into the option of using mdx with database. Do you have any resource specifically for this ? For now I am trying without db. Is it possible to change the logic of "on this page" based on tab change ? Basically I want to write a custom logic for table of content and tab change relating their behaviour. This way I will have more data in single mdx file.

[muhammad-fiaz]

I am not sure about full customise but you can replace the component with your own custom ones and also i believe for the "on this page" and tabs feature you can create a logic for that and simply add that to the mdx page or layout it's up to u :)