diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts
index 89d4c9de4cf3..60355572b583 100644
--- a/lib/api/src/modules/stories.ts
+++ b/lib/api/src/modules/stories.ts
@@ -254,7 +254,16 @@ Did you create a path that uses the separator char accidentally, such as 'Vue <d
 
     const { storyId, viewMode } = store.getState();
 
-    if (!storyId || !storiesHash[storyId]) {
+    if (storyId && storyId.match(/--\*$/)) {
+      const idStart = storyId.slice(0, -1); // drop the * at the end
+      const firstKindLeaf = Object.values(storiesHash).find(
+        (s: Story | Group) => !s.children && s.id.substring(0, idStart.length) === idStart
+      );
+
+      if (viewMode && firstKindLeaf) {
+        navigate(`/${viewMode}/${firstKindLeaf.id}`);
+      }
+    } else if (!storyId || storyId === '*' || !storiesHash[storyId]) {
       // when there's no storyId or the storyId item doesn't exist
       // we pick the first leaf and navigate
       const firstLeaf = Object.values(storiesHash).find((s: Story | Group) => !s.children);
diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
index 076c278753f8..52d4a265e21d 100644
--- a/lib/api/src/modules/url.ts
+++ b/lib/api/src/modules/url.ts
@@ -72,6 +72,10 @@ const initialUrlSupport = ({ navigate, location, path }: Module) => {
   if (selectedKind && selectedStory) {
     const storyId = toId(selectedKind, selectedStory);
     setTimeout(() => navigate(`/story/${storyId}`, { replace: true }), 1);
+  } else if (selectedKind) {
+    // Create a "storyId" of the form `kind-sanitized--*`
+    const standInId = toId(selectedKind, 'star').replace(/star$/, '*');
+    setTimeout(() => navigate(`/story/${standInId}`, { replace: true }), 1);
   } else if (!queryPath || queryPath === '/') {
     setTimeout(() => navigate(`/story/*`, { replace: true }), 1);
   } else if (Object.keys(query).length > 1) {