diff --git a/.storybook/main.ts b/.storybook/main.ts
index dbb00f232a9..ff9c71ad390 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -72,13 +72,10 @@ const config: StorybookConfig = {
         }
       ],
   addons,
-  docs: {
-    autodocs: true
-  },
   typescript: {
     reactDocgen: 'react-docgen-typescript'
   },
-  staticDirs: [isDevMode && 'images-dev', 'images'].filter(Boolean)
+  staticDirs: [isDevMode && 'images-dev', !isDevMode && 'images'].filter(Boolean)
 };
 
 export default config;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 5f043684b25..d10915e24b6 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -156,7 +156,8 @@ const preview: Preview = {
       }
     },
     chromatic: { pauseAnimationAtEnd: true }
-  }
+  },
+  tags: ['autodocs']
 };
 
 export default preview;
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
index 664e7d66d45..8b9090f8d46 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
@@ -126,7 +126,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render(args) {
     return (
-      <ObjectPage {...args}>
+      // `onBeforeNavigate` has to be called like this, otherwise it's invoked two times for some reason.
+      <ObjectPage {...args} onBeforeNavigate={args.onBeforeNavigate}>
         <ObjectPageSection titleText="Goals" id="goals" aria-label="Goals">
           <Form layout="S1 M2 L3 XL3" labelSpan="S12 M12 L12 XL12">
             <FormItem labelContent={<Label showColon>Evangelize the UI framework across the company</Label>}>
@@ -305,7 +306,7 @@ export const SectionWithCustomHeader: Story = {
   name: 'section with custom header',
   render(args) {
     return (
-      <ObjectPage {...args}>
+      <ObjectPage {...args} onBeforeNavigate={args.onBeforeNavigate}>
         <ObjectPageSection
           titleText="Goals"
           hideTitleText
@@ -349,7 +350,7 @@ export const FullScreenSingleSection: Story = {
   name: 'with fullscreen section',
   render(args) {
     return (
-      <ObjectPage {...args} mode={ObjectPageMode.IconTabBar}>
+      <ObjectPage {...args} mode={ObjectPageMode.IconTabBar} onBeforeNavigate={args.onBeforeNavigate}>
         <ObjectPageSection titleText="Section 1" id="section1" style={{ height: '100%' }}>
           <div style={{ height: '100%', background: 'lightblue' }}>
             It is recommended to only use fullscreen sections in TabBar mode, otherwise your layout will most probably
@@ -378,6 +379,7 @@ export const LegacyToolbarSupport: Story = {
     return (
       <ObjectPage
         {...args}
+        onBeforeNavigate={args.onBeforeNavigate}
         ref={objectPageRef}
         titleArea={
           <ObjectPageTitle