Storybook能否隐藏侧边栏stories但保留URL访问能力？

核心逻辑 #

通过Storybook官方提供的过滤配置，仅将目标Story从侧边栏渲染列表中剔除，不会注销其对应的路由规则，因此直接访问、插件跳转都不受影响。

具体实现方法 #

优先推荐使用标签配置，兼容性覆盖6.5+、7.x、8.x全版本：

方法1：给目标Story单独添加hidden标签 #

JS/TS格式stories写法

// Button.stories.tsx 示例
export default {
  title: 'Components/Button',
  component: Button,
}

// 正常展示在侧边栏的Story
export const Primary = {
  args: { primary: true, label: "主按钮" }
}

// 需要隐藏的「With Text Only」Story
export const WithTextOnly = {
  // 添加这一行配置即可
  tags: ["hidden"],
  args: { textOnly: true, label: "纯文本按钮" }
}

MDX格式stories写法

<Story name="With Text Only" tags={['hidden']}>
  <Button textOnly>纯文本按钮</Button>
</Story>

注：该配置是Storybook官方标准能力，不属于自定义hack，后续版本升级不会出现兼容性问题。

方法2：全局配置批量过滤（适合批量隐藏同规则Story） #

如果需要批量隐藏符合特定命名/路径规则的Story，可在.storybook/preview.js中配置侧边栏过滤规则：

// .storybook/preview.js
export default {
  sidebar: {
    filterItems: (item) => {
      // 过滤掉名称为「With Text Only」的Story，返回false即不在侧边栏展示
      if (item.type === 'story' && item.name === 'With Text Only') {
        return false
      }
      // 其余内容正常展示
      return true
    }
  }
}

效果验证 #

配置完成后重启Storybook即可生效：

• 侧边栏不再展示「With Text Only」对应的条目
• 直接访问原Story地址可正常加载
• 可通过addon-links正常跳转至该Story

内容的提问来源于stack exchange，提问作者Tony Hoan Trinh