diff --git a/addons/options/README.md b/addons/options/README.md
index e19aa601ecda..92dcb099570b 100644
--- a/addons/options/README.md
+++ b/addons/options/README.md
@@ -90,13 +90,19 @@ setOptions({
    * @type {Regex}
    */
   hierarchySeparator: null,
-
+  /**
+   * regex for finding the hierarchy root separator
+   * @example:
+   *   null - turn off mulitple hierarchy roots
+   *   /\|/ - split by `|`
+   * @type {Regex}
+   */
+  hierarchyRootSeparator: null,
   /**
    * sidebar tree animations
    * @type {Boolean}
    */
   sidebarAnimations: true,
-
   /**
    * id to select an addon panel
    * @type {String}
diff --git a/addons/options/src/preview/index.js b/addons/options/src/preview/index.js
index c97b594824ac..b4eb3d67fab4 100644
--- a/addons/options/src/preview/index.js
+++ b/addons/options/src/preview/index.js
@@ -13,6 +13,14 @@ function regExpStringify(exp) {
   return null;
 }
 
+function hasOwnProp(object, propName) {
+  return Object.prototype.hasOwnProperty.call(object, propName);
+}
+
+function withRegexProp(object, propName) {
+  return hasOwnProp(object, propName) ? { [propName]: regExpStringify(object[propName]) } : {};
+}
+
 // setOptions function will send Storybook UI options when the channel is
 // ready. If called before, options will be cached until it can be sent.
 export function setOptions(newOptions) {
@@ -23,16 +31,13 @@ export function setOptions(newOptions) {
     );
   }
 
-  let options = newOptions;
-
   // since 'undefined' and 'null' are the valid values we don't want to
-  // override the hierarchySeparator if the prop is missing
-  if (Object.prototype.hasOwnProperty.call(newOptions, 'hierarchySeparator')) {
-    options = {
-      ...newOptions,
-      hierarchySeparator: regExpStringify(newOptions.hierarchySeparator),
-    };
-  }
+  // override the hierarchySeparator or hierarchyRootSeparator if the prop is missing
+  const options = {
+    ...newOptions,
+    ...withRegexProp(newOptions, 'hierarchySeparator'),
+    ...withRegexProp(newOptions, 'hierarchyRootSeparator'),
+  };
 
   channel.emit(EVENT_ID, { options });
 }
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index 631e70c75c1f..3ee683d25cdd 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -13,7 +13,8 @@ setOptions({
   showSearchBox: false,
   addonPanelInRight: true,
   sortStoriesByKind: false,
-  hierarchySeparator: /\/|\./,
+  hierarchySeparator: /\./,
+  hierarchyRootSeparator: /\|/,
 });
 
 // deprecated usage of infoAddon
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 8eb7037ca68b..b013ea08ee2c 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,7 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 import { configure } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
 import 'react-chromatic/storybook-addon';
 
+setOptions({
+  hierarchySeparator: /\/|\./,
+  hierarchyRootSeparator: /\|/,
+});
+
 function loadStories() {
   let req;
   req = require.context('../../lib/ui/src', true, /\.stories\.js$/);
diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
index d85b387dd973..40a2739f4999 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon a11y Default 1`] = `<button />`;
+exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
 
-exports[`Storyshots Addon a11y Disabled 1`] = `
+exports[`Storyshots Addons|a11y Disabled 1`] = `
 <button
   disabled=""
 >
@@ -10,7 +10,7 @@ exports[`Storyshots Addon a11y Disabled 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon a11y Invalid contrast 1`] = `
+exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
 <button
   style="color:black;background-color:black"
 >
@@ -18,7 +18,7 @@ exports[`Storyshots Addon a11y Invalid contrast 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon a11y Label 1`] = `
+exports[`Storyshots Addons|a11y Label 1`] = `
 <button>
   Testing the a11y addon
 </button>
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index d245eb9a062c..14d27e909bd3 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Actions All types 1`] = `
+exports[`Storyshots Addons|Actions All types 1`] = `
 <div>
   <button
     class="css-1yjiefr"
@@ -100,7 +100,7 @@ exports[`Storyshots Addon Actions All types 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Actions Circular Payload 1`] = `
+exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -108,7 +108,7 @@ exports[`Storyshots Addon Actions Circular Payload 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Decorated Action 1`] = `
+exports[`Storyshots Addons|Actions Decorated Action 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -116,7 +116,7 @@ exports[`Storyshots Addon Actions Decorated Action 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Function Name 1`] = `
+exports[`Storyshots Addons|Actions Function Name 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -124,7 +124,7 @@ exports[`Storyshots Addon Actions Function Name 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Hello World 1`] = `
+exports[`Storyshots Addons|Actions Hello World 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -132,7 +132,7 @@ exports[`Storyshots Addon Actions Hello World 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Reserved keyword as name 1`] = `
+exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
 <button
   class="css-1yjiefr"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
index 47cb40abe1be..1d884b6c1c4f 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Backgrounds story 1 1`] = `
+exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 <div
   style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >
@@ -10,7 +10,7 @@ exports[`Storyshots Addon Backgrounds story 1 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Backgrounds story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 <div
   style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
index 8e6394975064..b7d57931d0c5 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Events Logger 1`] = `
+exports[`Storyshots Addons|Events Logger 1`] = `
 <div
   style="padding:20px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
       \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif;color:rgb(51, 51, 51)"
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index c581d34dc47a..7a57c1477b52 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
+exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -34,7 +34,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Decorator
+            Addons|Info.Decorator
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -274,7 +274,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
+exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -311,7 +311,7 @@ exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.GitHub issues
+            Addons|Info.GitHub issues
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -428,7 +428,7 @@ exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
+exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -462,7 +462,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Markdown
+            Addons|Info.Markdown
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -753,7 +753,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.TableComponent Use a custom component for the table 1`] = `
+exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component for the table 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -787,7 +787,7 @@ exports[`Storyshots Addon Info.Options.TableComponent Use a custom component for
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.TableComponent
+            Addons|Info.Options.TableComponent
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -920,7 +920,7 @@ exports[`Storyshots Addon Info.Options.TableComponent Use a custom component for
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1`] = `
+exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1180,7 +1180,7 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`] = `
+exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`] = `
 <div>
   <div>
     <div
@@ -1192,7 +1192,7 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
         <h1
           style="margin:0;padding:0;font-size:35px"
         >
-          Addon Info.Options.inline
+          Addons|Info.Options.inline
         </h1>
         <h2
           style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -1442,7 +1442,7 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.propTables Shows additional component prop tables 1`] = `
+exports[`Storyshots Addons|Info.Options.propTables Shows additional component prop tables 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1476,7 +1476,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.propTables
+            Addons|Info.Options.propTables
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -1828,7 +1828,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
+exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1867,7 +1867,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.propTablesExclude
+            Addons|Info.Options.propTablesExclude
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2166,7 +2166,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1`] = `
+exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2200,7 +2200,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.source
+            Addons|Info.Options.source
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2396,7 +2396,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.styles Extend info styles with an object 1`] = `
+exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2430,7 +2430,7 @@ exports[`Storyshots Addon Info.Options.styles Extend info styles with an object
           <h1
             style="margin:0;padding:0;font-size:35px;color:green"
           >
-            Addon Info.Options.styles
+            Addons|Info.Options.styles
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2661,7 +2661,7 @@ exports[`Storyshots Addon Info.Options.styles Extend info styles with an object
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.styles Full control over styles using a function 1`] = `
+exports[`Storyshots Addons|Info.Options.styles Full control over styles using a function 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2695,7 +2695,7 @@ exports[`Storyshots Addon Info.Options.styles Full control over styles using a f
           <h1
             style="margin:0;padding:0;font-size:35px;color:red"
           >
-            Addon Info.Options.styles
+            Addons|Info.Options.styles
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2926,7 +2926,7 @@ exports[`Storyshots Addon Info.Options.styles Full control over styles using a f
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`] = `
+exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2960,7 +2960,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.React Docgen
+            Addons|Info.React Docgen
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -3166,7 +3166,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations 1`] = `
+exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -3200,7 +3200,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.React Docgen
+            Addons|Info.React Docgen
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -3627,7 +3627,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from component declaration 1`] = `
+exports[`Storyshots Addons|Info.React Docgen Comments from component declaration 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -3661,7 +3661,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.React Docgen
+            Addons|Info.React Docgen
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
diff --git a/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
index 652ddaa6b0a7..906dfc2bbc47 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon jest withTests 1`] = `
+exports[`Storyshots Addons|jest withTests 1`] = `
 <div>
   <p>
     Hello
diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
index 7ff7c24426eb..0bf3a0717c79 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobs triggers actions via button 1`] = `
 <div>
   <p>
     Hit the knob load button and it should trigger an async load after a short delay
@@ -11,7 +11,7 @@ exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobs tweaks static values 1`] = `
 <div
   style="background-color:#ffff00;border:3px solid #ff00ff;padding:10px"
 >
@@ -51,7 +51,7 @@ exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
 <div>
   <p>
     Hit the knob load button and it should trigger an async load after a short delay
@@ -62,7 +62,7 @@ exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button wit
 </div>
 `;
 
-exports[`Storyshots Addon Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
 <div
   style="background-color:#ffff00;border:3px solid #ff00ff;padding:10px"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
index b95a4d1e1ca3..b02867dfb0fd 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Links.Button First 1`] = `
+exports[`Storyshots Addons|Links.Button First 1`] = `
 <button>
   Go to "Second"
 </button>
 `;
 
-exports[`Storyshots Addon Links.Button Second 1`] = `
+exports[`Storyshots Addons|Links.Button Second 1`] = `
 <button>
   Go to "First"
 </button>
 `;
 
-exports[`Storyshots Addon Links.Href log 1`] = `
+exports[`Storyshots Addons|Links.Href log 1`] = `
 <span>
   See action logger
 </span>
 `;
 
-exports[`Storyshots Addon Links.Link First 1`] = `
+exports[`Storyshots Addons|Links.Link First 1`] = `
 <a
   href="/"
 >
@@ -26,7 +26,7 @@ exports[`Storyshots Addon Links.Link First 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Link Second 1`] = `
+exports[`Storyshots Addons|Links.Link Second 1`] = `
 <a
   href="/"
 >
@@ -34,7 +34,7 @@ exports[`Storyshots Addon Links.Link Second 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Select First 1`] = `
+exports[`Storyshots Addons|Links.Select First 1`] = `
 <a
   href="/"
 >
@@ -42,7 +42,7 @@ exports[`Storyshots Addon Links.Select First 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Select Index 1`] = `
+exports[`Storyshots Addons|Links.Select Index 1`] = `
 <select>
   <option
     selected=""
@@ -61,7 +61,7 @@ exports[`Storyshots Addon Links.Select Index 1`] = `
 </select>
 `;
 
-exports[`Storyshots Addon Links.Select Second 1`] = `
+exports[`Storyshots Addons|Links.Select Second 1`] = `
 <a
   href="/"
 >
@@ -69,7 +69,7 @@ exports[`Storyshots Addon Links.Select Second 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Select Third 1`] = `
+exports[`Storyshots Addons|Links.Select Third 1`] = `
 <a
   href="/"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
index 9c221f6c80ab..c63bb34386ea 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Notes using deprecated API 1`] = `
+exports[`Storyshots Addons|Notes using deprecated API 1`] = `
 <button>
   😀 😎 👍 💯
 </button>
 `;
 
-exports[`Storyshots Addon Notes withNotes 1`] = `
+exports[`Storyshots Addons|Notes withNotes 1`] = `
 <button>
   Button with notes - check the notes panel for details
 </button>
 `;
 
-exports[`Storyshots Addon Notes withNotes rendering imported markdown 1`] = `
+exports[`Storyshots Addons|Notes withNotes rendering imported markdown 1`] = `
 <button>
   Button with notes - check the notes panel for details
 </button>
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
index d1892ec7a7bb..18ea68caad68 100644
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ b/examples/official-storybook/stories/addon-a11y.stories.js
@@ -6,7 +6,7 @@ import BaseButton from '../components/BaseButton';
 
 const text = 'Testing the a11y addon';
 
-storiesOf('Addon a11y', module)
+storiesOf('Addons|a11y', module)
   .addDecorator(checkA11y)
   .add('Default', () => <BaseButton label="" />)
   .add('Label', () => <BaseButton label={text} />)
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index ba9355f9f928..b353ddaf3014 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -8,7 +8,7 @@ import { File } from 'global';
 
 const pickFirst = decorateAction([args => args.slice(0, 1)]);
 
-storiesOf('Addon Actions', module)
+storiesOf('Addons|Actions', module)
   .add('Hello World', () => <Button onClick={action('hello-world')}>Hello World</Button>)
   .add('Decorated Action', () => <Button onClick={pickFirst('decorated')}>First Argument</Button>)
   .add('Circular Payload', () => {
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index 9a0627118bb9..f1458f4d81dd 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import backgrounds from '@storybook/addon-backgrounds';
 import BaseButton from '../components/BaseButton';
 
-storiesOf('Addon Backgrounds', module)
+storiesOf('Addons|Backgrounds', module)
   .addDecorator(
     backgrounds([
       { name: 'twitter', value: '#00aced' },
diff --git a/examples/official-storybook/stories/addon-events.stories.js b/examples/official-storybook/stories/addon-events.stories.js
index 9621e03fbeef..2e0c6712a672 100644
--- a/examples/official-storybook/stories/addon-events.stories.js
+++ b/examples/official-storybook/stories/addon-events.stories.js
@@ -15,7 +15,7 @@ const EVENTS = {
 const emitter = new EventEmitter();
 const emit = emitter.emit.bind(emitter);
 
-storiesOf('Addon Events', module)
+storiesOf('Addons|Events', module)
   .addDecorator(getStory => (
     <WithEvents
       emit={emit}
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index d6fad18d2c58..c4f0c4d53e5d 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -8,7 +8,7 @@ import FlowTypeButton from '../components/FlowTypeButton';
 import BaseButton from '../components/BaseButton';
 import TableComponent from '../components/TableComponent';
 
-storiesOf('Addon Info.React Docgen', module)
+storiesOf('Addons|Info.React Docgen', module)
   .add(
     'Comments from PropType declarations',
     withInfo(
@@ -39,12 +39,12 @@ const Button = () => <button />;
 Maybe include a [link](http://storybook.js.org) to your project as well.
 `;
 
-storiesOf('Addon Info.Markdown', module).add(
+storiesOf('Addons|Info.Markdown', module).add(
   'Displays Markdown in description',
   withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
 );
 
-storiesOf('Addon Info.Options.inline', module).add(
+storiesOf('Addons|Info.Options.inline', module).add(
   'Inlines component inside story',
   withInfo({
     text: 'Component should be inlined between description and PropType table',
@@ -52,7 +52,7 @@ storiesOf('Addon Info.Options.inline', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.header', module).add(
+storiesOf('Addons|Info.Options.header', module).add(
   'Shows or hides Info Addon header',
   withInfo({
     text: 'The Info Addon header should be hidden',
@@ -60,7 +60,7 @@ storiesOf('Addon Info.Options.header', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.source', module).add(
+storiesOf('Addons|Info.Options.source', module).add(
   'Shows or hides Info Addon source',
   withInfo({
     text: 'The Info Addon source section should be hidden',
@@ -68,7 +68,7 @@ storiesOf('Addon Info.Options.source', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.propTables', module).add(
+storiesOf('Addons|Info.Options.propTables', module).add(
   'Shows additional component prop tables',
   withInfo({
     text: 'There should be a prop table added for a component not included in the story',
@@ -76,7 +76,7 @@ storiesOf('Addon Info.Options.propTables', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.propTablesExclude', module).add(
+storiesOf('Addons|Info.Options.propTablesExclude', module).add(
   'Exclude component from prop tables',
   withInfo({
     text: 'This can exclude extraneous components from being displayed in prop tables.',
@@ -89,7 +89,7 @@ storiesOf('Addon Info.Options.propTablesExclude', module).add(
   ))
 );
 
-storiesOf('Addon Info.Options.styles', module)
+storiesOf('Addons|Info.Options.styles', module)
   .add(
     'Extend info styles with an object',
     withInfo({
@@ -123,14 +123,14 @@ storiesOf('Addon Info.Options.styles', module)
     })(() => <BaseButton label="Button" />)
   );
 
-storiesOf('Addon Info.Options.TableComponent', module).add(
+storiesOf('Addons|Info.Options.TableComponent', module).add(
   'Use a custom component for the table',
   withInfo({
     TableComponent,
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Decorator', module)
+storiesOf('Addons|Info.Decorator', module)
   .addDecorator((story, context) =>
     withInfo('Info could be used as a global or local decorator as well.')(story)(context)
   )
@@ -142,7 +142,7 @@ const Input = hoc(() => <input type="text" />);
 
 const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
 
-storiesOf('Addon Info.GitHub issues', module).add(
+storiesOf('Addons|Info.GitHub issues', module).add(
   '#1814',
   withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
     <div>
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index a53ba301a683..3cb6f9135907 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -8,7 +8,7 @@ const withTestsFiles = withTests({
   results,
 });
 
-storiesOf('Addon jest', module)
+storiesOf('Addons|jest', module)
   .addDecorator(withTestsFiles('addon-jest'))
   .add('withTests', () => (
     <div>
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index c009a428cf18..d5ddfd0e7a55 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -45,7 +45,7 @@ class AsyncItemLoader extends React.Component {
   }
 }
 
-storiesOf('Addon Knobs.withKnobs', module)
+storiesOf('Addons|Knobs.withKnobs', module)
   .addDecorator(withKnobs)
   .add('tweaks static values', () => {
     const name = text('Name', 'Storyteller');
@@ -97,7 +97,7 @@ storiesOf('Addon Knobs.withKnobs', module)
     </div>
   ));
 
-storiesOf('Addon Knobs.withKnobsOptions', module)
+storiesOf('Addons|Knobs.withKnobsOptions', module)
   .addDecorator(
     withKnobsOptions({
       debounce: { wait: 100, leading: boolean }, // Same as lodash debounce.
diff --git a/examples/official-storybook/stories/addon-links.stories.js b/examples/official-storybook/stories/addon-links.stories.js
index fada321e6a72..884cdfd58596 100644
--- a/examples/official-storybook/stories/addon-links.stories.js
+++ b/examples/official-storybook/stories/addon-links.stories.js
@@ -4,11 +4,11 @@ import { linkTo, hrefTo } from '@storybook/addon-links';
 import LinkTo from '@storybook/addon-links/react';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon Links.Link', module)
+storiesOf('Addons|Links.Link', module)
   .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
   .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
 
-storiesOf('Addon Links.Button', module)
+storiesOf('Addons|Links.Button', module)
   .add('First', () => (
     <button onClick={linkTo('Addon Links.Button', 'Second')}>Go to "Second"</button>
   ))
@@ -16,7 +16,7 @@ storiesOf('Addon Links.Button', module)
     <button onClick={linkTo('Addon Links.Button', 'First')}>Go to "First"</button>
   ));
 
-storiesOf('Addon Links.Select', module)
+storiesOf('Addons|Links.Select', module)
   .add('Index', () => (
     <select value="Index" onChange={linkTo('Addon Links.Select', e => e.currentTarget.value)}>
       <option>Index</option>
@@ -29,7 +29,7 @@ storiesOf('Addon Links.Select', module)
   .add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
   .add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
 
-storiesOf('Addon Links.Href', module).add('log', () => {
+storiesOf('Addons|Links.Href', module).add('log', () => {
   hrefTo('Addon Links.Href', 'log').then(href => action('URL of this story')({ href }));
 
   return <span>See action logger</span>;
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index b4b67686fd3e..ffed0b3cd2da 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -7,7 +7,7 @@ import { action } from '@storybook/addon-actions';
 import BaseButton from '../components/BaseButton';
 import markdownNotes from './notes/notes.md';
 
-storiesOf('Addon Notes', module)
+storiesOf('Addons|Notes', module)
   .add(
     'withNotes',
     withNotes(
diff --git a/lib/ui/src/modules/api/index.js b/lib/ui/src/modules/api/index.js
index 123b7beaac83..ad9e9ad04574 100755
--- a/lib/ui/src/modules/api/index.js
+++ b/lib/ui/src/modules/api/index.js
@@ -9,6 +9,7 @@ export default {
       url: 'https://github.com/storybooks/storybook',
       sortStoriesByKind: false,
       hierarchySeparator: '/',
+      hierarchyRootSeparator: null,
       sidebarAnimations: true,
     },
   },
diff --git a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
index 5386fff943d4..63be349d9fd8 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
@@ -44,7 +44,7 @@ exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
 </div>
 `;
 
-exports[`Storyshots ui/stories/StoriesPanel storiesHierarchy exists but is empty 1`] = `
+exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is empty 1`] = `
 <div
   style="padding:10px 0 10px 10px"
 >
@@ -84,11 +84,13 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchy exists but is empty
   </div>
   <div
     style="height:calc(100vh - 105px);margin-top:10px;overflow:auto"
-  />
+  >
+    0
+  </div>
 </div>
 `;
 
-exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchy prop 1`] = `
+exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
 <div
   style="padding:10px 0 10px 10px"
 >
@@ -129,94 +131,96 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchy prop 1`] = `
   <div
     style="height:calc(100vh - 105px);margin-top:10px;overflow:auto"
   >
-    <ul
-      style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
-    >
-      <li
-        style="position:relative"
+    <div>
+      <ul
+        style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
       >
-        <span>
-          <ul
-            style="padding-left:19px;list-style:none"
-          >
-            <li
-              style="position:relative"
+        <li
+          style="position:relative"
+        >
+          <span>
+            <ul
+              style="padding-left:19px;list-style:none"
             >
-              <div
-                data-name="kk"
-                role="menuitem"
-                style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                tabindex="0"
+              <li
+                style="position:relative"
               >
                 <div
-                  data-radium="true"
+                  data-name="kk"
+                  role="menuitem"
+                  style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                  tabindex="0"
                 >
                   <div
-                    style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                    data-radium="true"
                   >
                     <div
-                      style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                      style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="10"
-                        preserveAspectRatio="xMidYMid meet"
-                        style="vertical-align:top;fill:#9DA5AB"
-                        viewBox="0 0 40 40"
-                        width="10"
+                      <div
+                        style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                       >
-                        <g>
-                          <path
-                            d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                          />
-                        </g>
-                      </svg>
+                        <svg
+                          fill="currentColor"
+                          height="10"
+                          preserveAspectRatio="xMidYMid meet"
+                          style="vertical-align:top;fill:#9DA5AB"
+                          viewBox="0 0 40 40"
+                          width="10"
+                        >
+                          <g>
+                            <path
+                              d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                            />
+                          </g>
+                        </svg>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                  >
                     <div
-                      style="line-height:18px;padding:1px 0 5px"
+                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                     >
-                      kk
+                      <div
+                        style="line-height:18px;padding:1px 0 5px"
+                      >
+                        kk
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <span>
-                <ul
-                  style="padding-left:19px;list-style:none"
-                >
-                  <li
-                    style="position:relative"
+                <span>
+                  <ul
+                    style="padding-left:19px;list-style:none"
                   >
-                    <a
-                      class="css-1enjukp"
-                      data-name="bb"
-                      href="?selectedKind=kk&selectedStory=bb&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                    <li
+                      style="position:relative"
                     >
-                      <div
-                        data-radium="true"
+                      <a
+                        class="css-1enjukp"
+                        data-name="bb"
+                        href="?selectedKind=kk&selectedStory=bb&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                       >
                         <div
-                          style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                          data-radium="true"
                         >
-                          <div>
-                            bb
+                          <div
+                            style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                          >
+                            <div>
+                              bb
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </a>
-                    <span />
-                  </li>
-                </ul>
-              </span>
-            </li>
-          </ul>
-        </span>
-      </li>
-    </ul>
+                      </a>
+                      <span />
+                    </li>
+                  </ul>
+                </span>
+              </li>
+            </ul>
+          </span>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 `;
diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.js b/lib/ui/src/modules/ui/components/stories_panel/index.js
index e8282889dd5a..825144efa0b6 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/index.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.js
@@ -16,7 +16,6 @@ const mainStyle = {
 };
 
 const storyProps = [
-  'storiesHierarchy',
   'selectedKind',
   'selectedHierarchy',
   'selectedStory',
@@ -31,15 +30,23 @@ function hierarchyContainsStories(storiesHierarchy) {
 
 // eslint-disable-next-line react/prefer-stateless-function
 class StoriesPanel extends Component {
+  renderStories() {
+    const { storiesHierarchies } = this.props;
+
+    return storiesHierarchies.map(
+      hierarchy =>
+        hierarchyContainsStories(hierarchy) && (
+          <Stories
+            key={hierarchy.name}
+            {...pick(this.props, storyProps)}
+            storiesHierarchy={hierarchy}
+          />
+        )
+    );
+  }
+
   render() {
-    const {
-      name,
-      onStoryFilter,
-      openShortcutsHelp,
-      storiesHierarchy,
-      storyFilter,
-      url,
-    } = this.props;
+    const { name, onStoryFilter, openShortcutsHelp, storyFilter, url } = this.props;
 
     return (
       <div style={mainStyle}>
@@ -49,18 +56,14 @@ class StoriesPanel extends Component {
           onClear={() => onStoryFilter('')}
           onChange={text => onStoryFilter(text)}
         />
-        <div style={scrollStyle}>
-          {hierarchyContainsStories(storiesHierarchy) ? (
-            <Stories {...pick(this.props, storyProps)} />
-          ) : null}
-        </div>
+        <div style={scrollStyle}>{this.renderStories()}</div>
       </div>
     );
   }
 }
 
 StoriesPanel.defaultProps = {
-  storiesHierarchy: null,
+  storiesHierarchies: [],
   storyFilter: null,
   onStoryFilter: () => {},
   openShortcutsHelp: null,
@@ -69,11 +72,13 @@ StoriesPanel.defaultProps = {
 };
 
 StoriesPanel.propTypes = {
-  storiesHierarchy: PropTypes.shape({
-    namespaces: PropTypes.arrayOf(PropTypes.string),
-    name: PropTypes.string,
-    map: PropTypes.object,
-  }),
+  storiesHierarchies: PropTypes.arrayOf(
+    PropTypes.shape({
+      namespaces: PropTypes.arrayOf(PropTypes.string),
+      name: PropTypes.string,
+      map: PropTypes.object,
+    })
+  ),
   storyFilter: PropTypes.string,
   onStoryFilter: PropTypes.func,
 
diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
index 034d83cac3be..67ae67516fe2 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import StoriesPanel from './index';
-import { createHierarchy } from '../../libs/hierarchy';
+import { createHierarchies } from '../../libs/hierarchy';
 import withLifecyle from '../../../../libs/withLifecycleDecorator';
 import { setContext } from '../../../../compose';
 
@@ -23,7 +23,7 @@ const decorator = withLifecyle({
   },
 });
 
-const storiesHierarchy = createHierarchy([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
+const storiesHierarchies = createHierarchies([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
 const openShortcutsHelp = action('openShortcutsHelp');
 const onStoryFilter = action('onStoryFilter');
 storiesOf('ui/stories/StoriesPanel', module)
@@ -35,9 +35,9 @@ storiesOf('ui/stories/StoriesPanel', module)
       onStoryFilter={onStoryFilter}
     />
   ))
-  .add('with storiesHierarchy prop', () => (
+  .add('with storiesHierarchies prop', () => (
     <StoriesPanel
-      storiesHierarchy={storiesHierarchy}
+      storiesHierarchies={storiesHierarchies}
       selectedKind="kk"
       selectedStory="bb"
       selectedHierarchy={['kk']}
@@ -45,9 +45,9 @@ storiesOf('ui/stories/StoriesPanel', module)
       onStoryFilter={onStoryFilter}
     />
   ))
-  .add('storiesHierarchy exists but is empty', () => (
+  .add('storiesHierarchies exists but is empty', () => (
     <StoriesPanel
-      storiesHierarchy={createHierarchy([])}
+      storiesHierarchies={createHierarchies([])}
       openShortcutsHelp={openShortcutsHelp}
       onStoryFilter={onStoryFilter}
     />
diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/index.test.js
index c618b6b4ae25..f88a67057779 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/index.test.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.test.js
@@ -4,7 +4,7 @@ import StoriesPanel from './index';
 import Header from './header';
 import TextFilter from './text_filter';
 import Stories from './stories_tree';
-import { createHierarchy } from '../../libs/hierarchy';
+import { createHierarchies } from '../../libs/hierarchy';
 
 describe('manager.ui.components.stories_panel.index', () => {
   test('should render Header and TextFilter by default', () => {
@@ -23,30 +23,68 @@ describe('manager.ui.components.stories_panel.index', () => {
     expect(wrap.find(Stories)).toBeEmpty();
   });
 
-  test('should render stories only if storiesHierarchy prop exists', () => {
+  test('should render stories only if storiesHierarchies prop exists', () => {
     const selectedKind = 'kk';
     const selectedStory = 'bb';
-    const storiesHierarchy = createHierarchy([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
+    const storiesHierarchies = createHierarchies([
+      { kind: 'kk', namespaces: ['kk'], stories: ['bb'] },
+    ]);
     const wrap = shallow(
       <StoriesPanel
-        storiesHierarchy={storiesHierarchy}
+        storiesHierarchies={storiesHierarchies}
         selectedKind={selectedKind}
         selectedStory={selectedStory}
         selectedHierarchy={['kk']}
       />
     );
 
-    const header = wrap.find(Stories).first();
-    expect(header.props()).toMatchObject({
-      storiesHierarchy,
+    expect(wrap.find(Stories)).toHaveLength(1);
+
+    const element = wrap.find(Stories).first();
+    expect(element.props()).toMatchObject({
+      storiesHierarchy: storiesHierarchies[0],
+      selectedKind,
+      selectedStory,
+    });
+  });
+
+  test('should render multiple stories if multiple storiesHierarchies exist', () => {
+    const selectedKind = 'kk';
+    const selectedStory = 'bb';
+    const stories = [
+      { kind: 'kk', namespaces: ['kk'], stories: ['bb'], rootName: 'a' },
+      { kind: 'kk', namespaces: ['kk'], stories: ['bb'], rootName: 'b' },
+    ];
+    const storiesHierarchies = createHierarchies(stories);
+    const wrap = shallow(
+      <StoriesPanel
+        storiesHierarchies={storiesHierarchies}
+        selectedKind={selectedKind}
+        selectedStory={selectedStory}
+        selectedHierarchy={['kk']}
+      />
+    );
+
+    expect(wrap.find(Stories)).toHaveLength(2);
+
+    const first = wrap.find(Stories).first();
+    expect(first.props()).toMatchObject({
+      storiesHierarchy: storiesHierarchies[0],
+      selectedKind,
+      selectedStory,
+    });
+
+    const second = wrap.find(Stories).at(1);
+    expect(second.props()).toMatchObject({
+      storiesHierarchy: storiesHierarchies[1],
       selectedKind,
       selectedStory,
     });
   });
 
   test('should not render stories if storiesHierarchy exists but is empty', () => {
-    const storiesHierarchy = createHierarchy([]);
-    const wrap = shallow(<StoriesPanel storiesHierarchy={storiesHierarchy} />);
+    const storiesHierarchies = createHierarchies([]);
+    const wrap = shallow(<StoriesPanel storiesHierarchies={storiesHierarchies} />);
 
     expect(wrap.find(Stories).exists()).toBe(false);
   });
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
index 56c657c48830..0a3bea905f3d 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
@@ -1,828 +1,838 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots ui/stories/Stories empty 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      />
-    </span>
-  </li>
-</ul>
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
+        />
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories simple 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="a"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="a"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  a
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    a
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span />
-        </li>
-        <li
-          style="position:relative"
-        >
-          <div
-            data-name="b"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+            <span />
+          </li>
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="b"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  b
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    b
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <a
-                  class="css-1b2u8sb"
-                  data-name="b1"
-                  href="?selectedKind=b&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1b2u8sb"
+                    data-name="b1"
+                    href="?selectedKind=b&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b1
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b1
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-              <li
-                style="position:relative"
-              >
-                <a
-                  class="css-1enjukp"
-                  data-name="b2"
-                  href="?selectedKind=b&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                  </a>
+                  <span />
+                </li>
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1enjukp"
+                    data-name="b2"
+                    href="?selectedKind=b&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b2
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b2
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                  </a>
+                  <span />
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is defined 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="some"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="some"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  some
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    some
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span />
-        </li>
-        <li
-          style="position:relative"
-        >
-          <div
-            data-name="another"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+            <span />
+          </li>
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="another"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  another
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    another
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <div
-                  data-name="space"
-                  role="menuitem"
-                  style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                  tabindex="0"
+                <li
+                  style="position:relative"
                 >
                   <div
-                    data-radium="true"
+                    data-name="space"
+                    role="menuitem"
+                    style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                    tabindex="0"
                   >
                     <div
-                      style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                      data-radium="true"
                     >
                       <div
-                        style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                        style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="10"
-                          preserveAspectRatio="xMidYMid meet"
-                          style="vertical-align:top;fill:#9DA5AB"
-                          viewBox="0 0 40 40"
-                          width="10"
+                        <div
+                          style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                         >
-                          <g>
-                            <path
-                              d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                            />
-                          </g>
-                        </svg>
+                          <svg
+                            fill="currentColor"
+                            height="10"
+                            preserveAspectRatio="xMidYMid meet"
+                            style="vertical-align:top;fill:#9DA5AB"
+                            viewBox="0 0 40 40"
+                            width="10"
+                          >
+                            <g>
+                              <path
+                                d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                              />
+                            </g>
+                          </svg>
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                    >
                       <div
-                        style="line-height:18px;padding:1px 0 5px"
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                       >
-                        space
+                        <div
+                          style="line-height:18px;padding:1px 0 5px"
+                        >
+                          space
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <span>
-                  <ul
-                    style="padding-left:19px;list-style:none"
-                  >
-                    <li
-                      style="position:relative"
+                  <span>
+                    <ul
+                      style="padding-left:19px;list-style:none"
                     >
-                      <div
-                        data-name="20"
-                        role="menuitem"
-                        style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                        tabindex="0"
+                      <li
+                        style="position:relative"
                       >
                         <div
-                          data-radium="true"
+                          data-name="20"
+                          role="menuitem"
+                          style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                          tabindex="0"
                         >
                           <div
-                            style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                            data-radium="true"
                           >
                             <div
-                              style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                              style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                             >
-                              <svg
-                                fill="currentColor"
-                                height="10"
-                                preserveAspectRatio="xMidYMid meet"
-                                style="vertical-align:top;fill:#9DA5AB"
-                                viewBox="0 0 40 40"
-                                width="10"
+                              <div
+                                style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                               >
-                                <g>
-                                  <path
-                                    d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                                  />
-                                </g>
-                              </svg>
+                                <svg
+                                  fill="currentColor"
+                                  height="10"
+                                  preserveAspectRatio="xMidYMid meet"
+                                  style="vertical-align:top;fill:#9DA5AB"
+                                  viewBox="0 0 40 40"
+                                  width="10"
+                                >
+                                  <g>
+                                    <path
+                                      d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                                    />
+                                  </g>
+                                </svg>
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                          >
                             <div
-                              style="line-height:18px;padding:1px 0 5px"
+                              style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                             >
-                              20
+                              <div
+                                style="line-height:18px;padding:1px 0 5px"
+                              >
+                                20
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <span>
-                        <ul
-                          style="padding-left:19px;list-style:none"
-                        >
-                          <li
-                            style="position:relative"
+                        <span>
+                          <ul
+                            style="padding-left:19px;list-style:none"
                           >
-                            <a
-                              class="css-1b2u8sb"
-                              data-name="b1"
-                              href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1b2u8sb"
+                                data-name="b1"
+                                href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b1
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b1
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                          <li
-                            style="position:relative"
-                          >
-                            <a
-                              class="css-1enjukp"
-                              data-name="b2"
-                              href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                              </a>
+                              <span />
+                            </li>
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1enjukp"
+                                data-name="b2"
+                                href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b2
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b2
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                        </ul>
-                      </span>
-                    </li>
-                  </ul>
-                </span>
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                              </a>
+                              <span />
+                            </li>
+                          </ul>
+                        </span>
+                      </li>
+                    </ul>
+                  </span>
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is provided 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="another"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="another"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  <span>
-                    ano
-                  </span>
-                  <strong
-                    style="background-color:#FFFEAA;font-weight:inherit"
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
                   >
-                    th
-                  </strong>
-                  <span>
-                    er
-                  </span>
+                    <span>
+                      ano
+                    </span>
+                    <strong
+                      style="background-color:#FFFEAA;font-weight:inherit"
+                    >
+                      th
+                    </strong>
+                    <span>
+                      er
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <div
-                  data-name="space"
-                  role="menuitem"
-                  style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                  tabindex="0"
+                <li
+                  style="position:relative"
                 >
                   <div
-                    data-radium="true"
+                    data-name="space"
+                    role="menuitem"
+                    style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                    tabindex="0"
                   >
                     <div
-                      style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                      data-radium="true"
                     >
                       <div
-                        style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                        style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="10"
-                          preserveAspectRatio="xMidYMid meet"
-                          style="vertical-align:top;fill:#9DA5AB"
-                          viewBox="0 0 40 40"
-                          width="10"
+                        <div
+                          style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                         >
-                          <g>
-                            <path
-                              d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                            />
-                          </g>
-                        </svg>
+                          <svg
+                            fill="currentColor"
+                            height="10"
+                            preserveAspectRatio="xMidYMid meet"
+                            style="vertical-align:top;fill:#9DA5AB"
+                            viewBox="0 0 40 40"
+                            width="10"
+                          >
+                            <g>
+                              <path
+                                d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                              />
+                            </g>
+                          </svg>
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                    >
                       <div
-                        style="line-height:18px;padding:1px 0 5px"
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                       >
-                        space
+                        <div
+                          style="line-height:18px;padding:1px 0 5px"
+                        >
+                          space
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <span>
-                  <ul
-                    style="padding-left:19px;list-style:none"
-                  >
-                    <li
-                      style="position:relative"
+                  <span>
+                    <ul
+                      style="padding-left:19px;list-style:none"
                     >
-                      <div
-                        data-name="20"
-                        role="menuitem"
-                        style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                        tabindex="0"
+                      <li
+                        style="position:relative"
                       >
                         <div
-                          data-radium="true"
+                          data-name="20"
+                          role="menuitem"
+                          style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                          tabindex="0"
                         >
                           <div
-                            style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                            data-radium="true"
                           >
                             <div
-                              style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                              style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                             >
-                              <svg
-                                fill="currentColor"
-                                height="10"
-                                preserveAspectRatio="xMidYMid meet"
-                                style="vertical-align:top;fill:#9DA5AB"
-                                viewBox="0 0 40 40"
-                                width="10"
+                              <div
+                                style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                               >
-                                <g>
-                                  <path
-                                    d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                                  />
-                                </g>
-                              </svg>
+                                <svg
+                                  fill="currentColor"
+                                  height="10"
+                                  preserveAspectRatio="xMidYMid meet"
+                                  style="vertical-align:top;fill:#9DA5AB"
+                                  viewBox="0 0 40 40"
+                                  width="10"
+                                >
+                                  <g>
+                                    <path
+                                      d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                                    />
+                                  </g>
+                                </svg>
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                          >
                             <div
-                              style="line-height:18px;padding:1px 0 5px"
+                              style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                             >
-                              20
+                              <div
+                                style="line-height:18px;padding:1px 0 5px"
+                              >
+                                20
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <span>
-                        <ul
-                          style="padding-left:19px;list-style:none"
-                        >
-                          <li
-                            style="position:relative"
+                        <span>
+                          <ul
+                            style="padding-left:19px;list-style:none"
                           >
-                            <a
-                              class="css-1b2u8sb"
-                              data-name="b1"
-                              href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1b2u8sb"
+                                data-name="b1"
+                                href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b1
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b1
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                          <li
-                            style="position:relative"
-                          >
-                            <a
-                              class="css-1enjukp"
-                              data-name="b2"
-                              href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                              </a>
+                              <span />
+                            </li>
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1enjukp"
+                                data-name="b2"
+                                href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b2
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b2
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                        </ul>
-                      </span>
-                    </li>
-                  </ul>
-                </span>
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                              </a>
+                              <span />
+                            </li>
+                          </ul>
+                        </span>
+                      </li>
+                    </ul>
+                  </span>
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is defined 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="some.name.item1"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="some.name.item1"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  some.name.item1
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    some.name.item1
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span />
-        </li>
-        <li
-          style="position:relative"
-        >
-          <div
-            data-name="another.space.20"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+            <span />
+          </li>
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="another.space.20"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  another.space.20
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    another.space.20
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <a
-                  class="css-1b2u8sb"
-                  data-name="b1"
-                  href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1b2u8sb"
+                    data-name="b1"
+                    href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b1
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b1
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-              <li
-                style="position:relative"
-              >
-                <a
-                  class="css-1enjukp"
-                  data-name="b2"
-                  href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                  </a>
+                  <span />
+                </li>
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1enjukp"
+                    data-name="b2"
+                    href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b2
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b2
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                  </a>
+                  <span />
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
index 977fc52a3600..907a1db89439 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
@@ -2,6 +2,7 @@ import { Treebeard } from 'react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
 import deepEqual from 'deep-equal';
+import TreeHeader from './tree_header';
 import treeNodeTypes from './tree_node_type';
 import treeDecorators from './tree_decorators';
 import treeStyle from './tree_style';
@@ -158,13 +159,16 @@ class Stories extends React.Component {
     data.root = true;
 
     return (
-      <Treebeard
-        style={treeStyle}
-        data={data}
-        onToggle={this.onToggle}
-        animations={sidebarAnimations ? undefined : false}
-        decorators={treeDecorators}
-      />
+      <div>
+        {storiesHierarchy.name && <TreeHeader>{storiesHierarchy.name}</TreeHeader>}
+        <Treebeard
+          style={treeStyle}
+          data={data}
+          onToggle={this.onToggle}
+          animations={sidebarAnimations ? undefined : false}
+          decorators={treeDecorators}
+        />
+      </div>
     );
   }
 }
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
index a9936d9ee470..dff9e319cdd5 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
@@ -3,11 +3,11 @@ import { storiesOf } from '@storybook/react';
 
 import Stories from './index';
 import { setContext } from '../../../../../compose';
-import { createHierarchy, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
+import { createHierarchies, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
 import { storyFilter } from '../../../libs/filters';
 import withLifecyle from '../../../../../libs/withLifecycleDecorator';
 
-const data = createHierarchy([
+const data = createHierarchies([
   { kind: 'a', name: 'a', namespaces: ['a'], stories: ['a1', 'a2'] },
   { kind: 'b', name: 'b', namespaces: ['b'], stories: ['b1', 'b2'] },
 ]);
@@ -22,8 +22,8 @@ const initialData = [
     stories: ['b1', 'b2'],
   },
 ];
-const dataWithoutSeparator = createHierarchy(prepareStoriesForHierarchy(initialData));
-const dataWithSeparator = createHierarchy(prepareStoriesForHierarchy(initialData, '\\.'));
+const dataWithoutSeparator = createHierarchies(prepareStoriesForHierarchy(initialData));
+const dataWithSeparator = createHierarchies(prepareStoriesForHierarchy(initialData, '\\.'));
 
 const filter = 'th';
 const selectedKind = 'another.space.20';
@@ -34,7 +34,7 @@ const filteredData = storyFilter(
   selectedKind
 );
 
-const filteredDataHierarchy = createHierarchy(filteredData);
+const filteredDataHierarchy = createHierarchies(filteredData);
 
 const decorator = withLifecyle({
   beforeEach() {
@@ -56,7 +56,7 @@ storiesOf('ui/stories/Stories', module)
   .addDecorator(decorator)
   .add('empty', () => (
     <Stories
-      storiesHierarchy={createHierarchy([])}
+      storiesHierarchy={createHierarchies([])[0]}
       selectedKind=""
       selectedStory=""
       selectedHierarchy={[]}
@@ -64,7 +64,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('simple', () => (
     <Stories
-      storiesHierarchy={data}
+      storiesHierarchy={data[0]}
       selectedKind="b"
       selectedStory="b2"
       selectedHierarchy={['b']}
@@ -72,7 +72,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('with hierarchy - hierarchySeparator is defined', () => (
     <Stories
-      storiesHierarchy={dataWithSeparator}
+      storiesHierarchy={dataWithSeparator[0]}
       selectedKind="another.space.20"
       selectedStory="b2"
       selectedHierarchy={['another', 'space', '20']}
@@ -80,7 +80,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('without hierarchy - hierarchySeparator is defined', () => (
     <Stories
-      storiesHierarchy={dataWithoutSeparator}
+      storiesHierarchy={dataWithoutSeparator[0]}
       selectedKind="another.space.20"
       selectedStory="b2"
       selectedHierarchy={['another.space.20']}
@@ -88,7 +88,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('with highlighting when storiesFilter is provided', () => (
     <Stories
-      storiesHierarchy={filteredDataHierarchy}
+      storiesHierarchy={filteredDataHierarchy[0]}
       selectedKind={selectedKind}
       selectedStory="b2"
       selectedHierarchy={['another', 'space', '20']}
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
index 6cca86627cfe..d5b8ade2e6c4 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
@@ -2,12 +2,16 @@ import { shallow, mount } from 'enzyme';
 import React from 'react';
 import Stories from './index';
 import { setContext } from '../../../../../compose';
-import { createHierarchy, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
+import {
+  createHierarchies,
+  createHierarchyRoot,
+  prepareStoriesForHierarchy,
+} from '../../../libs/hierarchy';
 import { storyFilter } from '../../../libs/filters';
 
 const leftClick = { button: 0 };
 
-describe('manager.ui.components.left_panel.stories', () => {
+describe('manager.ui.components.stories_panel.stories_tree', () => {
   beforeEach(() =>
     setContext({
       clientStore: {
@@ -21,10 +25,10 @@ describe('manager.ui.components.left_panel.stories', () => {
 
   afterEach(() => setContext(null));
 
-  const data = createHierarchy([
+  const data = createHierarchies([
     { kind: 'a', name: 'a', namespaces: ['a'], stories: ['a1', 'a2'] },
     { kind: 'b', name: 'b', namespaces: ['b'], stories: ['b1', 'b2'] },
-  ]);
+  ])[0];
 
   const initialData = [
     {
@@ -37,14 +41,14 @@ describe('manager.ui.components.left_panel.stories', () => {
     },
   ];
 
-  const dataWithoutSeparator = createHierarchy(prepareStoriesForHierarchy(initialData));
-  const dataWithSeparator = createHierarchy(prepareStoriesForHierarchy(initialData, '\\.'));
+  const dataWithoutSeparator = createHierarchies(prepareStoriesForHierarchy(initialData))[0];
+  const dataWithSeparator = createHierarchies(prepareStoriesForHierarchy(initialData, '\\.'))[0];
 
   describe('render', () => {
     test('should render stories - empty', () => {
       const wrap = shallow(
         <Stories
-          storiesHierarchy={createHierarchy([])}
+          storiesHierarchy={createHierarchyRoot()}
           selectedKind=""
           selectedStory=""
           selectedHierarchy={[]}
@@ -245,11 +249,11 @@ describe('manager.ui.components.left_panel.stories', () => {
         selectedKind
       );
 
-      const filteredDataHierarchy = createHierarchy(filteredData);
+      const filteredDataHierarchy = createHierarchies(filteredData);
 
       const wrap = mount(
         <Stories
-          storiesHierarchy={filteredDataHierarchy}
+          storiesHierarchy={filteredDataHierarchy[0]}
           selectedKind={selectedKind}
           selectedStory="b2"
           selectedHierarchy={['another', 'space', '20']}
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
new file mode 100644
index 000000000000..bf638bdbd9ce
--- /dev/null
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { baseFonts } from '@storybook/components';
+
+const headingStyle = {
+  ...baseFonts,
+  textTransform: 'uppercase',
+  letterSpacing: '1.2px',
+  fontSize: '12px',
+  fontWeight: 'normal',
+  color: '#828282',
+  textAlign: 'left',
+  padding: '5px 13px',
+  margin: 0,
+  marginTop: 20,
+  overflow: 'hidden',
+};
+
+const TreeHeader = ({ children }) => <h4 style={headingStyle}>{children}</h4>;
+
+TreeHeader.propTypes = {
+  children: PropTypes.string.isRequired,
+};
+
+export default TreeHeader;
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.test.js
new file mode 100644
index 000000000000..407c5be7343a
--- /dev/null
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.test.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TreeHeader from './tree_header';
+
+describe('manager.ui.components.stories_panel.stories_tree.tree_header', () => {
+  test('should render tree header content', () => {
+    const content = 'abcd';
+    const wrap = shallow(<TreeHeader>{content}</TreeHeader>);
+
+    expect(wrap.text()).toEqual(content);
+  });
+});
diff --git a/lib/ui/src/modules/ui/containers/stories_panel.js b/lib/ui/src/modules/ui/containers/stories_panel.js
index c8b95e99419e..bf0f0a6f07ae 100755
--- a/lib/ui/src/modules/ui/containers/stories_panel.js
+++ b/lib/ui/src/modules/ui/containers/stories_panel.js
@@ -6,16 +6,28 @@ import compose from '../../../compose';
 import {
   prepareStoriesForHierarchy,
   resolveStoryHierarchy,
-  createHierarchy,
+  resolveStoryHierarchyRoots,
+  createHierarchies,
 } from '../libs/hierarchy';
 
 export const mapper = (state, props, { actions }) => {
   const actionMap = actions();
 
   const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state;
-  const { name, url, sortStoriesByKind, hierarchySeparator, sidebarAnimations } = uiOptions;
+  const {
+    name,
+    url,
+    sortStoriesByKind,
+    hierarchySeparator,
+    hierarchyRootSeparator,
+    sidebarAnimations,
+  } = uiOptions;
 
-  const preparedStories = prepareStoriesForHierarchy(stories, hierarchySeparator);
+  const preparedStories = prepareStoriesForHierarchy(
+    stories,
+    hierarchySeparator,
+    hierarchyRootSeparator
+  );
 
   const filteredStories = filters.storyFilter(
     preparedStories,
@@ -25,11 +37,13 @@ export const mapper = (state, props, { actions }) => {
     sortStoriesByKind
   );
 
-  const storiesHierarchy = createHierarchy(filteredStories);
-  const selectedHierarchy = resolveStoryHierarchy(selectedKind, hierarchySeparator);
+  const storiesHierarchies = createHierarchies(filteredStories);
+
+  const { storyName } = resolveStoryHierarchyRoots(selectedKind, hierarchyRootSeparator);
+  const selectedHierarchy = resolveStoryHierarchy(storyName, hierarchySeparator);
 
   return {
-    storiesHierarchy,
+    storiesHierarchies,
     selectedKind,
     selectedStory,
     selectedHierarchy,
diff --git a/lib/ui/src/modules/ui/containers/stories_panel.test.js b/lib/ui/src/modules/ui/containers/stories_panel.test.js
index d599c25b13f9..a95ff17d36a6 100755
--- a/lib/ui/src/modules/ui/containers/stories_panel.test.js
+++ b/lib/ui/src/modules/ui/containers/stories_panel.test.js
@@ -35,7 +35,7 @@ describe('manager.ui.containers.stories_panel', () => {
       };
       const result = mapper(state, props, env);
 
-      expect(result.storiesHierarchy.map).toEqual(
+      expect(result.storiesHierarchies[0].map).toEqual(
         new Map([
           [
             'sk',
@@ -96,7 +96,7 @@ describe('manager.ui.containers.stories_panel', () => {
       };
       const result = mapper(state, props, env);
 
-      expect(result.storiesHierarchy.map).toEqual(
+      expect(result.storiesHierarchies[0].map).toEqual(
         new Map([
           [
             'pk', // selected kind is always there. That's why this is here.
@@ -163,7 +163,7 @@ describe('manager.ui.containers.stories_panel', () => {
       };
       const result = mapper(state, props, env);
 
-      expect(result.storiesHierarchy.map).toEqual(
+      expect(result.storiesHierarchies[0].map).toEqual(
         new Map([
           // selected kind is always there. That's why this is here.
           [
diff --git a/lib/ui/src/modules/ui/libs/filters.js b/lib/ui/src/modules/ui/libs/filters.js
index 358b2a3f6455..2987c17cdb37 100755
--- a/lib/ui/src/modules/ui/libs/filters.js
+++ b/lib/ui/src/modules/ui/libs/filters.js
@@ -26,6 +26,7 @@ function flattenStories(items) {
   return items.reduce((arr, item) => {
     const flatten = item.stories.map(story => ({
       kind: item.kind,
+      rootName: item.rootName,
       namespaces: item.namespaces,
       storyName: story,
     }));
@@ -53,6 +54,7 @@ function getGroupedStoryItem(map, item, matches) {
   if (!storyItem) {
     storyItem = {
       kind: item.kind,
+      rootName: item.rootName,
       namespaces: item.namespaces,
       stories: [],
       matches: matches.filter(match => match.key === 'namespaces'),
diff --git a/lib/ui/src/modules/ui/libs/filters.test.js b/lib/ui/src/modules/ui/libs/filters.test.js
index 2e24b4eb77c7..104dbba25699 100755
--- a/lib/ui/src/modules/ui/libs/filters.test.js
+++ b/lib/ui/src/modules/ui/libs/filters.test.js
@@ -8,15 +8,15 @@ describe('manager.ui.libs.filters', () => {
     });
 
     test('should original stories if there is no filter', () => {
-      const stories = [{ kind: ['aa'], namespaces: ['aa'], stories: ['bb'] }];
+      const stories = [{ kind: ['aa'], namespaces: ['aa'], stories: ['bb'], rootName: '' }];
       const res = storyFilter(stories);
       expect(res).toBe(stories);
     });
 
     test('should always return the selectedKind', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
       ];
 
       const selectedKind = 'bb';
@@ -28,8 +28,8 @@ describe('manager.ui.libs.filters', () => {
 
     test('should always return the selectedKind with the single selectedStory', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb', 'cc', 'dd'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb', 'cc', 'dd'], rootName: '' },
       ];
 
       const selectedKind = 'bb';
@@ -41,9 +41,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should filter kinds correctly', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
-        { kind: 'ss', namespaces: ['ss'], stories: ['bb'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
+        { kind: 'ss', namespaces: ['ss'], stories: ['bb'], rootName: '' },
       ];
       const selectedKind = 'bb';
       const selectedStory = 'bb';
@@ -54,9 +54,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should not sort stories by kind', () => {
       const stories = [
-        { kind: 'ss', namespaces: ['ss'], stories: ['bb'] },
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
+        { kind: 'ss', namespaces: ['ss'], stories: ['bb'], rootName: '' },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
       ];
       const res = storyFilter(stories);
 
@@ -65,9 +65,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should sort stories by kind', () => {
       const stories = [
-        { kind: 'ss', namespaces: ['ss'], stories: ['bb'] },
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
+        { kind: 'ss', namespaces: ['ss'], stories: ['bb'], rootName: '' },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
       ];
       const res = storyFilter(stories, null, null, null, true);
 
@@ -76,9 +76,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should filter on story level', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd'] },
-        { kind: 'ee', namespaces: ['ee'], stories: ['ff'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd'], rootName: '' },
+        { kind: 'ee', namespaces: ['ee'], stories: ['ff'], rootName: '' },
       ];
       const selectedKind = 'aa';
       const selectedStory = 'bb';
@@ -89,21 +89,21 @@ describe('manager.ui.libs.filters', () => {
 
     test('should filter out unmatched stories at lowest level', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd'] },
-        { kind: 'ee', namespaces: ['ee'], stories: ['ff', 'gg'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd'], rootName: '' },
+        { kind: 'ee', namespaces: ['ee'], stories: ['ff', 'gg'], rootName: '' },
       ];
       const selectedKind = 'aa';
       const selectedStory = 'bb';
       const res = storyFilter(stories, 'ff', selectedKind, selectedStory);
 
-      expect(res).toMatchObject([stories[0], { kind: 'ee', stories: ['ff'] }]);
+      expect(res).toMatchObject([stories[0], { kind: 'ee', stories: ['ff'], rootName: '' }]);
     });
 
     test('should be case insensitive at tree level', () => {
       const stories = [
-        { kind: 'Aa', namespaces: ['aA'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd'] },
+        { kind: 'Aa', namespaces: ['aA'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd'], rootName: '' },
       ];
       const selectedKind = 'aA';
       const res = storyFilter(stories, 'aa', selectedKind);
@@ -113,14 +113,14 @@ describe('manager.ui.libs.filters', () => {
 
     test('should be case insensitive at story level', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd', 'eE'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd', 'eE'], rootName: '' },
       ];
       const selectedKind = 'aa';
       const selectedStory = 'bb';
       const res = storyFilter(stories, 'ee', selectedKind, selectedStory);
 
-      expect(res).toMatchObject([stories[0], { kind: 'cc', stories: ['eE'] }]);
+      expect(res).toMatchObject([stories[0], { kind: 'cc', stories: ['eE'], rootName: '' }]);
     });
   });
 });
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js
index d0cb54ca91aa..397a3f6a2362 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.js
@@ -46,24 +46,58 @@ function fillHierarchy(namespaces, hierarchy, story) {
   fillHierarchy(namespaces.slice(1), childHierarchy, story);
 }
 
-export function createHierarchy(stories) {
-  const hierarchyRoot = {
+export function createHierarchyRoot(name = '') {
+  return {
     isNamespace: true,
     namespaces: [],
-    name: '',
+    name,
     map: new Map(),
   };
+}
+
+function ensureMainRootIsFirst(hierarchies) {
+  const mainRoot = hierarchies.find(hierarchy => hierarchy.name === '');
+  const mainRootIndex = hierarchies.indexOf(mainRoot);
+  if (mainRootIndex === -1 && hierarchies.length === 0) {
+    hierarchies.push(createHierarchyRoot());
+  } else if (mainRootIndex > 0) {
+    hierarchies.unshift(...hierarchies.splice(mainRootIndex, 1));
+  }
+  return hierarchies;
+}
+
+export function createHierarchies(stories) {
+  const rootMap = {};
 
   if (stories) {
     stories.forEach(story => {
-      const { namespaces } = story;
+      const { rootName = '', namespaces } = story;
       const name = namespaces[namespaces.length - 1];
+      const hierarchyRoot =
+        rootMap[rootName] || (rootMap[rootName] = createHierarchyRoot(rootName));
 
       fillHierarchy(namespaces, hierarchyRoot, { ...story, name });
     });
   }
 
-  return hierarchyRoot;
+  return ensureMainRootIsFirst(Object.values(rootMap));
+}
+
+export function resolveStoryHierarchyRoots(storyName = '', hierarchyRootSeparator) {
+  if (!hierarchyRootSeparator) {
+    return { rootName: '', storyName };
+  }
+
+  const segments = storyName.split(new RegExp(hierarchyRootSeparator));
+
+  switch (segments.length) {
+    case 1:
+      return { rootName: '', storyName };
+    case 2:
+      return { rootName: segments[0], storyName: segments[1] };
+    default:
+      throw new Error(`multiple root separators found in story name: ${storyName}`);
+  }
 }
 
 export function resolveStoryHierarchy(storyName = '', hierarchySeparator) {
@@ -74,16 +108,18 @@ export function resolveStoryHierarchy(storyName = '', hierarchySeparator) {
   return storyName.split(new RegExp(hierarchySeparator));
 }
 
-export function prepareStoriesForHierarchy(stories, hierarchySeparator) {
+export function prepareStoriesForHierarchy(stories, hierarchySeparator, hierarchyRootSeparator) {
   if (!stories) {
     return null;
   }
 
   return stories.map(story => {
-    const namespaces = resolveStoryHierarchy(story.kind, hierarchySeparator);
+    const { rootName, storyName } = resolveStoryHierarchyRoots(story.kind, hierarchyRootSeparator);
+    const namespaces = resolveStoryHierarchy(storyName, hierarchySeparator);
 
     return {
       ...story,
+      rootName,
       namespaces,
     };
   });
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.test.js b/lib/ui/src/modules/ui/libs/hierarchy.test.js
index 83869495ea16..1255f0fdff08 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.test.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.test.js
@@ -1,9 +1,15 @@
-import { createHierarchy, resolveStoryHierarchy, prepareStoriesForHierarchy } from './hierarchy';
+import {
+  createHierarchyRoot,
+  createHierarchies,
+  resolveStoryHierarchy,
+  resolveStoryHierarchyRoots,
+  prepareStoriesForHierarchy,
+} from './hierarchy';
 
 describe('manager.ui.libs.hierarchy', () => {
-  describe('createHierarchy', () => {
-    test('should return root hierarchy node if stories are undefined', () => {
-      const result = createHierarchy();
+  describe('createHierarchyRoot', () => {
+    test('should return root hierarchy node', () => {
+      const result = createHierarchyRoot();
 
       expect(result).toEqual({
         namespaces: [],
@@ -13,10 +19,34 @@ describe('manager.ui.libs.hierarchy', () => {
       });
     });
 
-    test('should return root hierarchy node if stories are empty', () => {
-      const result = createHierarchy([]);
+    test('should return root hierarchy node with root name', () => {
+      const result = createHierarchyRoot('root name');
 
       expect(result).toEqual({
+        namespaces: [],
+        name: 'root name',
+        isNamespace: true,
+        map: new Map(),
+      });
+    });
+  });
+
+  describe('createHierarchies', () => {
+    test('should return empty root hierarchy if stories are undefined', () => {
+      const result = createHierarchies();
+
+      expect(result[0]).toEqual({
+        namespaces: [],
+        name: '',
+        isNamespace: true,
+        map: new Map(),
+      });
+    });
+
+    test('should return empty root hierarchy if stories are empty', () => {
+      const result = createHierarchies([]);
+
+      expect(result[0]).toEqual({
         namespaces: [],
         name: '',
         isNamespace: true,
@@ -38,7 +68,7 @@ describe('manager.ui.libs.hierarchy', () => {
         },
       ];
 
-      const result = createHierarchy(stories);
+      const result = createHierarchies(stories);
 
       const expected = [
         [
@@ -67,7 +97,8 @@ describe('manager.ui.libs.hierarchy', () => {
         ],
       ];
 
-      expect(result.map).toEqual(new Map(expected));
+      expect(result).toHaveLength(1);
+      expect(result[0].map).toEqual(new Map(expected));
     });
 
     test('should return hierarchy if kind is separated', () => {
@@ -84,7 +115,7 @@ describe('manager.ui.libs.hierarchy', () => {
         },
       ];
 
-      const result = createHierarchy(stories, '\\.');
+      const result = createHierarchies(stories, '\\.');
 
       const expected = new Map([
         [
@@ -157,7 +188,61 @@ describe('manager.ui.libs.hierarchy', () => {
         ],
       ]);
 
-      expect(result.map).toEqual(expected);
+      expect(result).toHaveLength(1);
+      expect(result[0].map).toEqual(expected);
+    });
+
+    test('should return multiple roots with main root first when different root names are given', () => {
+      const stories = [
+        {
+          kind: 'second|some.name.item1',
+          rootName: 'second',
+          namespaces: ['some.name.item1'],
+          stories: ['a1', 'a2'],
+        },
+        {
+          kind: 'another.space.20',
+          rootName: '', // main
+          namespaces: ['another.space.20'],
+          stories: ['b1', 'b2'],
+        },
+      ];
+
+      const result = createHierarchies(stories);
+
+      const expectedMain = [
+        [
+          'another.space.20',
+          {
+            kind: 'another.space.20',
+            name: 'another.space.20',
+            namespaces: ['another.space.20'],
+            highlight: null,
+            isNamespace: true,
+            map: new Map(),
+            stories: [{ name: 'b1', highlight: null }, { name: 'b2', highlight: null }],
+          },
+        ],
+      ];
+
+      const expectedSecond = [
+        [
+          'some.name.item1',
+          {
+            kind: 'second|some.name.item1',
+            name: 'some.name.item1',
+            namespaces: ['some.name.item1'],
+            highlight: null,
+            isNamespace: true,
+            map: new Map(),
+            stories: [{ name: 'a1', highlight: null }, { name: 'a2', highlight: null }],
+          },
+        ],
+      ];
+
+      expect(result).toHaveLength(2);
+      expect(result[0].map).toEqual(new Map(expectedMain));
+      expect(result[1].map).toEqual(new Map(expectedSecond));
     });
   });
 
@@ -175,6 +260,28 @@ describe('manager.ui.libs.hierarchy', () => {
     });
   });
 
+  describe('resolveStoryHierarchyRoots', () => {
+    test('should return empty root name when hierarchyRootSeparator is undefined', () => {
+      const { rootName, storyName } = resolveStoryHierarchyRoots('some|name.item1');
+
+      expect(rootName).toEqual('');
+      expect(storyName).toEqual('some|name.item1');
+    });
+
+    test('should return array with separated root name and story name when hierarchyRootSeparator is defined', () => {
+      const { rootName, storyName } = resolveStoryHierarchyRoots('some|name.item1', '\\|');
+
+      expect(rootName).toEqual('some');
+      expect(storyName).toEqual('name.item1');
+    });
+
+    test('should throw error when hierarchyRootSeparator is found multiple times', () => {
+      expect(() => {
+        resolveStoryHierarchyRoots('some|name|item1', '\\|');
+      }).toThrow();
+    });
+  });
+
   describe('prepareStoriesForHierarchy', () => {
     test('should return null when nothing provided', () => {
       const result = prepareStoriesForHierarchy();
@@ -188,8 +295,8 @@ describe('manager.ui.libs.hierarchy', () => {
       const result = prepareStoriesForHierarchy(stories);
 
       expect(result).toEqual([
-        { kind: 'some.name.item1', namespaces: ['some.name.item1'] },
-        { kind: 'another.space.20', namespaces: ['another.space.20'] },
+        { kind: 'some.name.item1', namespaces: ['some.name.item1'], rootName: '' },
+        { kind: 'another.space.20', namespaces: ['another.space.20'], rootName: '' },
       ]);
     });
 
@@ -199,8 +306,19 @@ describe('manager.ui.libs.hierarchy', () => {
       const result = prepareStoriesForHierarchy(stories, '\\.');
 
       expect(result).toEqual([
-        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'] },
-        { kind: 'another.space.20', namespaces: ['another', 'space', '20'] },
+        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'], rootName: '' },
+        { kind: 'another.space.20', namespaces: ['another', 'space', '20'], rootName: '' },
+      ]);
+    });
+
+    test('should return filled root name when root separator is provided', () => {
+      const stories = [{ kind: 'some.name.item1' }, { kind: 'another|space.20' }];
+
+      const result = prepareStoriesForHierarchy(stories, '\\.', '\\|');
+
+      expect(result).toEqual([
+        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'], rootName: '' },
+        { kind: 'another|space.20', namespaces: ['space', '20'], rootName: 'another' },
       ]);
     });
   });