Custom header plugin

The shared header is one of the default plugins: the Red Hat Developer Hub global header, enabled, mounted at application/header with position above-main-content. The default plugin entry for the header package also orders the sidebar through default.main-menu-items menu items. Change the header by reconfiguring that entry, not by editing the image.

Change sidebar items

Sidebar order and visibility are app configuration under dynamicPlugins.frontend.default.main-menu-items.menuItems, one entry per item. On the local stack, set them in app-config.custom.yaml in the devportal-local directory so the fragment loads after the product fragment, as described in Add configuration to the local stack:

dynamicPlugins:
  frontend:
    default.main-menu-items:
      menuItems:
        default.home:
          priority: 100
        default.catalog:
          priority: 96
        default.learning-path:
          enabled: false

A higher priority sorts the item higher. enabled: false hides the item. On Kubernetes, set the same keys under upstream.backstage.appConfig in your chart values:

upstream:
  backstage:
    appConfig:
      dynamicPlugins:
        frontend:
          default.main-menu-items:
            menuItems:
              default.home:
                priority: 100
              default.catalog:
                priority: 96
              default.learning-path:
                enabled: false

Reconfigure the header plugin

To change the header mount itself, override the default plugin entry for the header package. An override's pluginConfig replaces the default plugin's whole pluginConfig (no merge), so copy the complete block and edit values in place. Copy the whole pluginConfig block for the header package from the catalog index's dynamic-plugins.default.yaml and edit only what you need. Prefer a disabled: true override alone when that is enough; reach for a full pluginConfig copy only when you must change the mount configuration.

Use {{inherit}} for the version so the override keeps the version that the catalog index gives the plugin and survives upgrades. Always keep the !<plugin-path> part after the version. In chart values (global.dynamic.plugins) the chart renders the list as a template, so write the tag as {{ "{{inherit}}" }} there; in the local stack's operator plugin file write {{inherit}} as is.

Replace or remove the header

To replace the header with your own plugin, disable the default plugin entry for the header package with an {{inherit}} reference and add your plugin, which must provide the application/header mount. On Kubernetes, both entries go under global.dynamic.plugins:

global:
  dynamic:
    plugins:
      - package: oci://quay.io/veecode/red-hat-developer-hub-backstage-plugin-global-header:{{ "{{inherit}}" }}!red-hat-developer-hub-backstage-plugin-global-header
        disabled: true

On the local stack, put the equivalent disabled: true entry in the operator plugin file, as described in Configure dynamic plugins for the local stack. Write the version as {{inherit}} as is, keeping the !<plugin-path> part, so the override keeps the version that the catalog index gives the plugin.

Source code

The source code for the current DevPortal header plugin is at VeeCode Header Plugin

RHDH Header docs

The VeeCode header plugin is based on the RHDH header plugin, so you can refer to the RHDH Header docs for more information on mount points and customization patterns.