> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/internal-developer-portal/3.0/admin-and-customization/layout-and-appearance/sidenav.md).

# Harness IDP Sidebar Navigation

In Harness IDP, you as a platform admin can customize the sidebar navigation to ensure the end-users see what is important for them. This can be used to add new plugins, reorder existing items based on priority, add custom links to different tools for quick access, etc. The Sidenav changes are reflected for everyone using Harness IDP and does not affect any other Harness modules.

![](/files/zBpepSFIBySQEv8CqFL9)

### The layout editor <a href="#the-layout-editor" id="the-layout-editor"></a>

You can access the Sidenav Layout editor by navigating to Harness IDP and choosing **Configure** from the sidebar.

You can then choose Layout from the Sidenav and choose the Sidebar Navigation Layout.

![](/files/UDJIXXXqphIXM7fILJ74)

<details>

<summary>Example Sidenav Layout YAML</summary>

```yaml
page:
  children:
    - name: SidebarItem
      props:
        to: overview
        text: Home
    - name: SidebarItem
      props:
        to: catalog
        text: Catalog
    - name: SidebarItem
      props:
        to: create
        text: Workflows
    - name: SidebarItem
      props:
        to: docs
        text: Docs
    - name: SidebarItem
      props:
        to: api-docs
        text: APIs
    - name: SidebarItem
      props:
        to: catalog-import
        text: Register
    - name: SidebarDivider
```

</details>

### Add a new link in the sidenav <a href="#add-a-new-link-in-the-sidenav" id="add-a-new-link-in-the-sidenav"></a>

Let us take an example of how you can add a new Custom Link to let us say your internal Sonarqube instance. This will open the link in a new tab.

```yaml
- name: SidebarItem
  props:
    to: https://mysonarqube.internal.net
    text: Sonarqube
```

### Change the default catalog landing page <a href="#change-the-default-catalog-landing-page" id="change-the-default-catalog-landing-page"></a>

You can also update existing Sidenav links to change the default landing behavior for users. Let us say you want users to see **Systems** by default when they click on **Catalog**. You can update the Catalog item with the following -

```yaml
- name: SidebarItem
  props:
    to: catalog?filters%5Bkind%5D=system
    text: Catalog
```

### Custom plugins <a href="#custom-plugins" id="custom-plugins"></a>

If you have built a [Custom Plugin](/internal-developer-portal/3.0/use-idp/plugins/custom-plugins/overview.md) inside IDP and are exporting a full page component, you can link to the plugin from the Sidenav as well.

```yaml
- name: SidebarItem
  props:
    to: EntityMyCustomPluginPage
    text: MyPlugin
```

### Embed an iframe <a href="#embed-an-iframe" id="embed-an-iframe"></a>

{% hint style="warning" %}
**LIMITED SUPPORT**

Iframe embedding via the sidebar has limited support now. Due to Content Security Policy (CSP) enforcement on the Harness platform, iframes will be blocked from rendering content from domains that are not explicitly whitelisted. If your target URL's domain is not on the CSP allowlist, the iframe will fail to load. Contact your Harness administrator to verify whether your domain is whitelisted before using this feature.
{% endhint %}

You can embed an iframe inside the sidenav layout to display external web content directly within your Harness IDP.

![](/files/UabQtA2g8RMW41Iz6Vao)

**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

{% hint style="info" %}
iframes come with certain inherent limitations. For example, OAuth will not work and some websites block themselves from being rendered inside iframes. Additionally, CSP enforcement will block iframes from rendering content from non-whitelisted domains.
{% endhint %}