How to show subheading in Storybook?

Question

I need to show subheadings in the left sidebar as shown in the attached picture.

Storybook version is 5.3.13.

Is there any parameter i need to change in the config file?

Answer 1

Check this link

For React in your ./storybook/preview.jsadd this code.

import { addParameters } from '@storybook/react';

addParameters({
  options: {
    /**
     * display the top-level grouping as a "root" in the sidebar
     * @type {Boolean}
     */
    showRoots: true,
  },
});

Answer 2

for Vue

just add the same path title for the subheadings.

documentation : link

example:

// Button.stories

import { Button as ButtonComponent } from './Button';

export default {

  title: 'Design System/Atoms/Button',
  component: ButtonComponent,
};

});