How to Configure the Sidebar | Storybook Quick Tip

Master your sidebar organization with @chantastic!
CHAPTERS
00:00 How to organize the Storybook Sidebar
00:19 The wrong way…
00:46 Make categories look like folders
01:40 Order categories with storySort
02:43 Warning: order is case-sensitive
02:57 Order nested folders and components
03:35 Warning: the order API is confusing
04:07 Order stories by changing the module export order
04:42 Tip: Docs are always first
04:48 Sort stories alphabetically
05:45 Tip: Alphabetic order isn't my favorite…
06:15 Take complete control with a custom storySort function
06:53 Warning: storySort is not supported by parameter inheritance
07:06 Remember: Restart after every change to the .storybook directory
07:32 Learn more about naming…
LINKS
- Naming components storybook.js.org/docs/react/w...
- Sidebar & URLS configuration storybook.js.org/docs/react/c...
- Storybook at learnstorybook.com/
- Storybook addons at storybook.js.org/addons
- Component driven UI development at www.componentdriven.org/
SOCIALS
Discord: / discord
Twitter: / storybookjs
GitHub: github.com/storybookjs/storybook
Follow chantastic:
RUclips: @chantastic
Twitter: / chantastic
OFFER
Get a $500 credit for automated visual testing. Signup to Chromatic with promo code DAY.

[@oneohthreejs]

@chantastic In the last bit of this video you mentioned to refer to the docs. Noticed that sometimes the docs on the website don't have all the information in the github repo. Would you mind doing a demo of using the docs to find out these "hidden" options that aren't covered in the website?

[@Opalidol]

Watched it just out of curiosity but it is actualy kinda awesome :D

[@chantastic]

haha! glad you gave ti a shot :)

[@jeremytenjo]

Awesome!

[@SaaSMakers]

Would be great to make an episode about storybook composition (several storybooks linked). Just discovered it in the doc and it’s great

[@chromaticui]

great suggestion! which use case is most interesting to you?
- incorporating the storybook of a design system/component library?
- microfrontends (different UI frameworks)

[@AneeshKR-me]

@@chromaticui I'd vote on different UI frameworks. would love to see that!

[@user-cx5ob1nc6m]

Great video!
Is there a way to style the sidebar similar to the demo image provided on the official Storybook "Sidebar & URLS" docs page? That sidebar showcases different title styles, versioning, and dividers! Would love to be able to use all of those :)

[@ethangeorge3244]

Is there a way to edit the sidebar icon for stories?

[@chromaticui]

we're sorry. not at the moment, no. i do believe that you could target it with CSS and write a selector that uses a remote image. but that's about it right now.

[@user-gj3vb1np2v]

Interesting, your "Introduction" item is sorted to the middle by your approach. But in my case, when using same storySort approach with listing Introduction in the end, all such stories (Introduction or other landing pages) are always placed in the beginning, before all the stories categories...

[@chromaticui]

thanks for sharing. which framework?

[@user-gj3vb1np2v]

@@chromaticui we are using Angular 👌

[@IAmLesleh]

Why couldn't the server just detect changes to the config and automatically reload in dev?

[@chromaticui]

different builders have varying degrees of support for setting being reloaded.

[@IAmLesleh]

@@chromaticui got it, thanks 🙂