NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
show the file breadcrumbs of your components
npm install storybook-addon-breadcrumbs
Last updated 5 months ago
Downloads per week
Readme View on GitHub

Storybook Addon breadcrumbs

show the file breadcrumbs of your components.


Check out the deployed demo storybook

🏁 Getting started

yarn add --dev storybook-addon-breadcrumbs

⚙️ Configuration

  1. Add "storybook-addon-breadcrumbs" to your .storybook/main.js config with the following options:
    • repositoryRoot: The root of your repo
    • defaultBranch: Your repo's default branch on github. Defaults to "main"
    • githubUrl: Url to your repo on github
// ./storybook/main.js
const path = require("path");

module.exports = {
  stories: [
  addons: [
      name: "../preset.js",
      options: {
        breadcrumbs: {
          repositoryRoot: path.resolve(__dirname, "../"),
          defaultBranch: "main",
          githubUrl: "",
  1. Add the "breadcrumbs" parameter to your desired stories. This should be the path to your component relative to your story file.
import React from "react";
import { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    breadcrumb: "./Button.js",

🧩 Compatibility

Currently this addon only works for React in Javascript. Typescript support is coming soon.

🤝 Contributing

  • yarn start runs babel in watch mode and starts Storybook
  • yarn build build and package your addon code

🔮 Coming soon™

  • Support for typescript create-react-app projects
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI