[IDP] - Feature : Embedding an Iframe (#11400)

* iframe

* Update sidenav.md

* release notes

* docs: clarify that iframe path segments must be unique in sidenav configuration

---------

Co-authored-by: khushisharmaharness <[email protected]>

Author: ShibamD

docs/internal-developer-portal/layout-and-appearance/sidenav.md

@@ -95,3 +95,35 @@ If you have built a [Custom Plugin](/docs/internal-developer-portal/plugins/cust
     to: EntityMyCustomPluginPage
     text: MyPlugin
 ```
+
+## Embedding an Iframe
+
+You can embed an iframe inside the sidenav layout to display external web content directly within your Harness IDP.
+
+![](./static/iframe-embedd.png)
+
+#### Steps to Add an Iframe
+
+1. Navigate to the sidenav layout page.
+2. Add a YAML block similar to the example below:
+
+```yaml
+- name: SidebarItem
+  type: iframe
+  props:
+    to: iframe/developer_docs
+    text: Developer docs
+    url: https://developer.harness.io/
+```
+
+When configuring the iframe SidebarItem:
+
+* Use `type: iframe` to specify an iframe element (case-insensitive, so `IfRAmE` also works)
+* Configure these properties under `props`:
+  * `to`: Must follow the format `iframe/${path}` where `${path}` is your custom path segment (this `path` is a unique path i.e. every sidebar item being added must be unique)
+  * `text`: The label that appears in the sidebar navigation
+  * `url`: The external URL you want to display within the iframe
+
+:::info
+iframes come with certain inherent limitations — for example, OAuth will not work and some websites put limits or block themselves from being rendered inside iframes.
+:::

docs/internal-developer-portal/layout-and-appearance/static/iframe-embedd.png

@@ -52,6 +52,28 @@ Harness IDP now supports integration with [GitLab](/docs/internal-developer-port
 
 ![](../docs/internal-developer-portal/plugins/available-plugins/static/gitlabplugin2.png)
 
+### [New Feature] Iframe Embedding in Sidebar Navigation
+
+Harness IDP now supports embedding external web content directly into your sidebar navigation using iframes. This feature allows you to integrate essential resources, documentation, dashboards, and tools directly into your developer portal interface.
+
+* **External Content Integration** - Add documentation, dashboards, or any web content directly in your IDP navigation
+* **Simple YAML Configuration** - Easy to implement with standard sidebar navigation format
+
+#### Example Configuration
+
+```yaml
+- name: SidebarItem
+  type: iframe
+  props:
+    to: iframe/developer_docs
+    text: Developer docs
+    url: https://developer.harness.io/
+```
+
+![](./static/internal-developer-portal/iframe-embedd.png)
+
+[Learn more about embedding iframes in your sidebar](/docs/internal-developer-portal/layout-and-appearance/sidenav#embedding-an-iframe)
+
 ### Bug Fixes and Improvements 
 
 * **Jira Plugin Enhancements** - We've made several improvements to the Jira plugin:
@@ -255,7 +277,6 @@ The [DX plugin configuration](https://developer.harness.io/docs/internal-develop
 
 
 
-
 ### [New Feature] Harness Feature Management & Experimentation Plugin
 
 Harness IDP now includes a native integration with Harness Feature Management & Experimentation (FME), allowing teams to view and manage feature flags directly in their service catalog.
@@ -268,6 +289,8 @@ Harness IDP now includes a native integration with Harness Feature Management &
 
 [Learn more about the Harness FME Plugin](/docs/internal-developer-portal/plugins/available-plugins/harness-native-plugins/harness-fme) 
 
+
+
 ### Bug Fixes and Improvements
 
 * **New Catalog APIs** - Harness IDP now includes two new APIs to make it easier to find and display catalog entities: