diff --git a/gatsby-config.js b/gatsby-config.js
index 046e41b6..e2ecd72d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -109,6 +109,10 @@ module.exports = {
             title: "Header Menu",
             path: "/services/aem-cf-console-admin/api/header-menu/"
           },
+          {
+            title: "Navigation",
+            path: "/services/aem-cf-console-admin/api/navigation/"
+          }
         ]
       },
       {
diff --git a/src/pages/services/aem-cf-console-admin/api/index.md b/src/pages/services/aem-cf-console-admin/api/index.md
index 3027942c..1b06ea5b 100644
--- a/src/pages/services/aem-cf-console-admin/api/index.md
+++ b/src/pages/services/aem-cf-console-admin/api/index.md
@@ -27,6 +27,14 @@ Learn how to extend and customize Action Bar
 
 Learn how to customize Grid Columns
 
+<DiscoverBlock slots="link, text"/>
+
 [Header Menu](header-menu)
 
 Explore the ways to extend and customize Header Menu
+
+<DiscoverBlock slots="link, text"/>
+
+[Navigation](navigation)
+
+Learn how to use basic methods for navigating within an extension
diff --git a/src/pages/services/aem-cf-console-admin/api/navigation/index.md b/src/pages/services/aem-cf-console-admin/api/navigation/index.md
new file mode 100644
index 00000000..52806320
--- /dev/null
+++ b/src/pages/services/aem-cf-console-admin/api/navigation/index.md
@@ -0,0 +1,67 @@
+---
+title: Navigation - AEM Content Fragments Console Extensibility
+description: Learn about navigation host API methods that can be used in any extension
+contributors:
+  - https://github.com/AdobeDocs/uix
+---
+
+# Navigation
+
+Describes basic methods for navigating within an extension.
+
+## API to open Content Fragment from an extension
+
+<InlineAlert variant="warning" slots="text" />
+
+The Content Fragment will only open in the headless editor if the `AemFeatures.ACTION_OPEN_NEW_EDITOR` feature is enabled for the AEM instance.
+
+```js
+import { useEffect } from "react";
+import { Text } from "@adobe/react-spectrum"
+import { extensionId } from "./Constants"
+import { register } from "@adobe/uix-guest";
+
+function ExtensionRegistration() {
+    useEffect(() => {
+        const init = async () => {
+            const registrationConfig = {
+                id: extensionId,
+                methods: {
+                    actionBar: {
+                        getButtons() {
+                            return [
+                                {
+                                    id: "example.open_in_editor",
+                                    label: "UIX Open In Editor",
+                                    icon: 'Export',
+                                    variant: "primary",
+                                    onClick: (selections) => {
+                                        console.log("UIX Open In Editor has been pressed.");
+                                        console.log(selections[0].id);
+                                        // or any other content fragment path
+                                        
+                                        guestConnection.host.navigation.openEditor(selections[0].id);
+                                    },
+                                },
+                            ];
+                        },
+                    },
+                },
+            };
+            const guestConnection = await register(registrationConfig);
+        }
+        init().catch(console.error)
+    }, []);
+    return <Text>IFrame for integration with Host (AEM)...</Text>
+}
+
+export default ExtensionRegistration;
+```
+
+![](./navigation.admin.open_in_editor.png)
+
+**API Reference**
+
+| Field                  | Type      | Required | Default | Description                                           |
+|------------------------|-----------|--------|-----------|-------------------------------------------------------|
+| fragmentPath           | `string`  | ✔️     |           | The path of the CF to be open.                        |
diff --git a/src/pages/services/aem-cf-console-admin/api/navigation/navigation.admin.open_in_editor.png b/src/pages/services/aem-cf-console-admin/api/navigation/navigation.admin.open_in_editor.png
new file mode 100644
index 00000000..de151b1d
Binary files /dev/null and b/src/pages/services/aem-cf-console-admin/api/navigation/navigation.admin.open_in_editor.png differ
diff --git a/src/pages/services/aem-cf-editor/api/index.md b/src/pages/services/aem-cf-editor/api/index.md
index dd7199a9..c22e3b64 100644
--- a/src/pages/services/aem-cf-editor/api/index.md
+++ b/src/pages/services/aem-cf-editor/api/index.md
@@ -27,18 +27,26 @@ Learn how to extend and customize Rich Text Editor Toolbar
 
 Learn how to customize Rich Text Editor Widgets
 
+<DiscoverBlock slots="link, text"/>
+
 [Rich Text Editor Badges](rte-badges)
 
 Learn how to customize Rich Text Editor Badges
 
+<DiscoverBlock slots="link, text"/>
+
 [Rich Text Editor Color Picker](rte-colorpicker)
 
 Learn how to customize Rich Text Editor Color Picker
 
+<DiscoverBlock slots="link, text"/>
+
 [Header Menu](header-menu)
 
 Explore the ways to extend and customize Header Menu
 
+<DiscoverBlock slots="link, text"/>
+
 [Navigation](navigation)
 
 Learn how to use basic methods for navigating within an extension
diff --git a/src/pages/services/aem-cf-editor/api/navigation/index.md b/src/pages/services/aem-cf-editor/api/navigation/index.md
index e7bc6a05..5eea9fca 100644
--- a/src/pages/services/aem-cf-editor/api/navigation/index.md
+++ b/src/pages/services/aem-cf-editor/api/navigation/index.md
@@ -13,7 +13,7 @@ Describes basic methods for navigating within an extension.
 
 <InlineAlert variant="warning" slots="text" />
 
-The Content Fragment will only open in the headless editor if the AemFeatures.ACTION_OPEN_NEW_EDITOR feature is enabled for the AEM instance.
+The Content Fragment will only open in the headless editor if the `AemFeatures.ACTION_OPEN_NEW_EDITOR` feature is enabled for the AEM instance.
 
 ```js
 import { useEffect } from "react";
@@ -59,7 +59,7 @@ function ExtensionRegistration() {
 export default ExtensionRegistration;
 ```
 
-![](./navigation.open_in_editor.png)
+![](./navigation.editor.open_in_editor.png)
 
 **API Reference**
 
diff --git a/src/pages/services/aem-cf-editor/api/navigation/navigation.open_in_editor.png b/src/pages/services/aem-cf-editor/api/navigation/navigation.editor.open_in_editor.png
similarity index 100%
rename from src/pages/services/aem-cf-editor/api/navigation/navigation.open_in_editor.png
rename to src/pages/services/aem-cf-editor/api/navigation/navigation.editor.open_in_editor.png