Harness IDP Sidebar Navigation

Learn how you can customize the Sidebar Navigation of Harness IDP

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.

The layout editor

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.

Example Sidenav Layout 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

Add a new link in the sidenav

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.

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

Change the default catalog landing page

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 -

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

Custom plugins

If you have built a Custom Plugin inside IDP and are exporting a full page component, you can link to the plugin from the Sidenav as well.

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

Embed an iframe

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.

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

Steps to add an iframe

1. Navigate to the sidenav layout page.

2. Add a YAML block similar to the example below:

- 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

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.