Provide a way to disable table of contents in .mdx files

[nlopin]

Is your feature request related to a problem? Please describe.

If Storybook is used to create a documentation site, it contains a mix of files with stories and unattached mdx pages.
Automatically generated table of contents is really helpful, but if it is enabled for all the pages, it is not possible to disable in MDX files.

This can lead to situations, when the page layout is broken:

Describe the solution you'd like

Provide parameters or a subset of it to the <Meta> component in MDX the same way I can provide parameters in CSF files:

<Meta title='Welcome' toc={{disable: true}} />

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[noranda]

Bumping this. I would absolutely love to use this feature in my story docs and certain unattached docs with no stories, but I cannot simply because it's either all or nothing. I have some guides that don't need it and will break the layout even if there are no headers. This is a fantastic feature, but it needs more control!

[nlopin]

I ended up hiding the TOC on individual pages via CSS 😢

[noranda]

I was playing around with this again yesterday and was able to do the same, only by absolutely positioning my top level div and giving it an inset. The empty toc with a set width is still there but now hidden. A hacky solution but I'll take it!

[Christo44]

how do you do this with css ? I don't see any unique selectors to do it per story.

I also tried to write a script in preview-head.html which waits for the DOM, then looks at the window path to apply a class to the preview body or iframe..

document.addEventListener('DOMContentLoaded', function () {

which seems overkill.

[noranda]

There wasn't a great way to do this. I have a welcome page with a background color, so I just absolutely positioned the entire page with Tailwind. In my MDX file I render this component:

import {Unstyled} from '@storybook/blocks';
// ...
<Unstyled>
  <div className="absolute inset-0 flex overflow-hidden bg-blue">
    {/* ... */}
  </div>
</Unstyled>

The TOC is still there, but since I have no header elements, it's just an empty div and is hidden behind my component div.

Hope this helps! Would still love to see better support for this.

[Christo44]

I'm not familiar with the unstyled block. Ill give it a look.

My problem may be that I'm using vite/vue builder. And I'm not using blocks, Im using mdx to write my stories.

[sirchnik-xitaso]

This works for me with vite/vue.

<style>
  {`
  .toc-wrapper {
    display: none;
  }
  `}
</style>

[noranda]

If it helps, you can use blocks in your MDX files, which is what I do. Unstyled just removes all of Storybook's base story styles, which can conflict with your styles.

[nedkelly]

If you find this doesn't quite do the job:

This works for me with vite/vue.

<style>
  {`
  .toc-wrapper {
    display: none;
  }
  `}
</style>

This worked for me:

<style>
  {`
    .sbdocs-wrapper > div:has(div > .toc-wrapper) {
      display: none;
    }
  `}
</style>