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]
Components
Stories
and Categories

Docs: Docs are Markdown and MDX files in your Storybook directory. Docs can also be automatically generated from Storybook components that use the autodocs tag. [enable and disable the code]

src/stories/Configure.mdx

export default {
  component: Button,
  tags: ['autodocs'],
}

Components: 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]

src/stories/Button.stories.js

Categories: Categories are groupings of components. They too are controlled by the component title, using slashes as a delimiter.

export default {
  title: "Example/Button"
  title: "Components/Button"
  component: Button,
  tags: ['autodocs'],
}

Folders: We can add levels of heirarchy between categories and components. These additional are called Folders. And can go as deeply as needed.

export default {
  title: "Components/Button"
  title: "Components/Atoms/Button"
  component: Button,
  tags: ['autodocs'],
}

Autotitle: The title property is not required. Provided that component is defined (which it is, here), we can remove it and Storybook infers the structure from the filesystem.

export default {
  title: "Components/Atoms/Button"
  component: Button,
  tags: ['autodocs'],
}

Using the autotitle is my preferred approach.

Finally,

Stories: 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 true
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)
Components
and Stories (unique, fixed states of a component)