Navigate Storybook Sidebar
To do anything in Storybook, we need to understand the Storybook sidebar. It’s is the navigation center of Storybook — where you select which story appears in the canvas.
Let’s start with the iconography.
First, expand all of the stories with this disclosure toggle. You’ll see:
[collapse each as shown]
- Docs [show both root level and component]
- and Categories
- Docs are Markdown and MDX files in your Storybook directory. Docs can also be automatically generated from Storybook components that use the
autodocstag. [enable and disable the code]
- Components correlate to story files on the file system — those with a
.stories.extension prefix. They get their name from the exported metadata of the story file. [quickly change the title of one]
- Categories are groupings of components. They too are controlled by the component title, using slashes as a delimiter.
- We can add levels of heirarchy between categories and components. These additional are called Folders. And can go as deeply as needed.
titleproperty is not required. Provided that
componentis defined (which it is, here), we can remove it and Storybook infers the structure from the filesystem.
Using the autotitle is my preferred approach.
- A Story is a rendered component with fixed data (or props). Our button component has four stories, each with a different set of args applied.
[Show these states using Controls panel]
- Primary, with the primary prop set to
- Secondary, using only default prop
- Large, and Small
Now we have a strong grasp of the Storybook sidebar, with its:
- Docs (and autodocs)
- Categories (and folders)
- and Stories (unique, fixed states of a component)