New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,426
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-multi-toolbar
Storybook addon to define multiple toggleable toolbar items
npm install storybook-multi-toolbar
Last updated over 1 year ago
0
Downloads per week
Readme View on GitHub

storybook-multi-toolbar

Storybook addon to define multiple toggleable toolbar items.

Storybook multi toolbar screenshot

Setup

npm install --save-dev storybook-multi-toolbar

Register addon in .storybook/main.js

module.exports = {
  // ...
  addons: [
    'storybook-multi-toolbar',
    // ...
  ],
};

Define menu items .storybook/preview.js

export const parameters = {
  multiToolbar: {
    toolbars: [
      {
        param: 'features',
        name: 'Features',
        lists: [
          // toggleable menu items
          {
            type: 'toggle',
            title: 'Toggle features',
            items: [
              { param: 'firstFeature', title: 'First feature' },
              { param: 'secondFeature', title: 'Second feature' },
              { param: 'thirdFeature', title: 'Third feature' },
            ],
          },
          // normal menu items
          {
            title: 'Locale',
            param: 'locale',
            items: [
              { value: 'en', right: '🇺🇸', title: 'English' },
              { value: 'fr', right: '🇫🇷', title: 'Français' },
              { value: 'es', right: '🇪🇸', title: 'Español' },
            ],
          },
        ],
      },
    ],
  },
};

See more examples in preview.ts and parameter structure in types.ts

Join the community
6,316 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI