3.3 KiB
| title |
|---|
| Sidebar & URLS |
Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the / separator to the title of your CSF file and Storybook will group the stories into groups based on common prefixes:
We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file components/modals/Alert.js name the CSF file components/modals/Alert.stories.js and title it Components/Modals/Alert.
Roots
By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups will show up as folders:
If you’d prefer to show top-level nodes as folders rather than roots, you can set the sidebar.showRoots option to false in ./storybook/manager.js:
<CodeSnippets paths={[ 'common/storybook-manager-disable-roots.js.mdx', ]} />
Automatically generate titles
With CSF 3.0 files, you can choose to leave out a title and let it be inferred from the story's path on disk instead:
<CodeSnippets paths={[ 'common/component-story-auto-title.js.mdx', ]} />
This is controlled by the way your stories are configured:
<CodeSnippets paths={[ 'common/component-story-configuration.js.mdx', ]} />
Given this configuration, the stories file ../src/components/MyComponent.stories.tsx will get the title components/MyComponent.
You can further customize the generated title by modifying the stories configuration.
<CodeSnippets paths={[ 'common/component-story-configuration-custom.js.mdx', ]} />
This configuration would match a custom file pattern, and add a custom prefix of Foo to each generated title.
Permalinking to stories
By default, Storybook generates an id for each story based on the component title and the story name. This id in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you publish your Storybook).
Consider the following story:
<CodeSnippets paths={[ 'common/foo-bar-baz-story.js.mdx', ]} />
Storybook's ID-generation logic will give this the id foo-bar--baz, so the link would be ?path=/story/foo-bar--baz.
It is possible to manually set the id of a story, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to OtherFoo/Bar and the story name to Moo. Here's how to do that:
<CodeSnippets paths={[ 'common/other-foo-bar-story.js.mdx', ]} />
Storybook will prioritize the id over the title for ID generation if provided and prioritize the story.name over the export key for display.