Storybook: UI: Add external links to navigation

[shilman]

The left-hand navigation of storybook consists of links to stories, arranged hierarchically. The Storybook logo link is also configurable (as well as visually).

In 5.2, we added the ability to link to "documentation-only stories" which is markdown-based documentation that can be interspersed within your stories.

Let's also allow the user to embed links to other external resources in the same navigation tree.

One possible implementation

In storiesOf:

storiesOf(...)
  .add('storybook website', 'http://storybook.js.org', { isLink: true })

In CSF:

export default { ... }
export const storybookWebsite = 'http://storybook.js.org'
storybookWebsite.story {
  isLink: true,
}

In MDX:

<Navigation name='storybook website' href='http://storybook.js.org' />

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[trevoreyre]

Is there a workaround to achieve this functionality now? Like hooking into the Storybook API somehow to redirect to an external page when a specific story is selected?

[fabian-hiller]

This feature is especially important for design systems and documentation. Has the implementation already started @shilman?

[shilman]

Nope, @fabian-hiller want to give it a try?

[fabian-hiller]

Nope, @fabian-hiller want to give it a try?

Yes I want to take a look at it. Can you give me a hint in which files to search?

[shilman]

Sure, it starts here: https://github.com/storybookjs/storybook/blob/master/lib/ui/src/components/sidebar/Sidebar.tsx