Red Hat Summit Red Hat SummitSupportKonsoleEntwicklerDemo startenKontakt

Dieser Inhalt ist in der von Ihnen ausgewählten Sprache nicht verfügbar.

Chapter 7. Configuring the global header in Red Hat Developer Hub

As an administrator, you can configure the Red Hat Developer Hub global header to create a consistent and flexible navigation bar across your Developer Hub instance. By default, the Developer Hub global header includes the following components:

  • Self-service button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within Developer Hub
  • Support button that can link an internal or external support page
  • Notifications button displays alerts and updates from plugins and external services
  • Search input field allows users to find services, components, documentation, and other resources within Developer Hub
  • Plugin extension capabilities provide a preinstalled and enabled catalog of available plugins in Developer Hub
  • User profile drop-down menu provides access to profile settings, appearance customization, Developer Hub metadata, and a logout button

7.1. Customizing your Red Hat Developer Hub global header
Link kopieren

You can use the red-hat-developer-hub.backstage-plugin-global-header dynamic plugin to extend the global header with additional buttons and customize the order and position of icons and features. Additionally, you can create and integrate your custom dynamic header plugins using the mount points provided by this new header feature, allowing you to further tailor to suit your needs. For more information about enabling dynamic plugins, see Installing and viewing plugins in Red Hat Developer Hub. 

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
    disabled: false
    pluginConfig:
      app:
        sidebar:
          search: false
          settings: false
      dynamicPlugins:
        frontend:
          default.main-menu-items:
            menuItems:
              default.create:
                title: ''
          red-hat-developer-hub.backstage-plugin-global-header: # the default enabled dynamic header plugin
            mountPoints:
              - mountPoint: application/header
                importName: GlobalHeader
                config:
                  position: above-main-content
1 

              - mountPoint: global.header/component
                importName: SearchComponent
                config:
                  priority: 100
              - mountPoint: global.header/component
                importName: Spacer
                config:
                  priority: 99
                  props:
                    growFactor: 0
              - mountPoint: global.header/component
                importName: HeaderIconButton
                config:
                  priority: 90
                  props:
                    title: Self-service
                    icon: add
                    to: create
              - mountPoint: global.header/component
                importName: SupportButton
                config:
                  priority: 80
              - mountPoint: global.header/component
                importName: NotificationButton
                config:
                  priority: 70
              - mountPoint: global.header/component
                importName: Divider
                config:
                  priority: 50
              - mountPoint: global.header/component
                importName: ProfileDropdown
                config:
                  priority: 10
              - mountPoint: global.header/profile
                importName: MenuItemLink
                config:
                  priority: 100
                  props:
                    title: Settings
                    link: /settings
                    icon: manageAccounts
              - mountPoint: global.header/profile
                importName: LogoutButton
                config:
                  priority: 10
Copy to Clipboard Toggle word wrap

where:

search
Hides the Search modal in the sidebar menu. Change it to true to display the Search modal in the sidebar.
settings
Hides the Settings button in the sidebar menu. Change it to true to display the Settings button in the sidebar.
default.main-menu-items
Hides the Self-service button from the sidebar menu. Remove this field to display the Self-service button in the sidebar.
position
Defines the position of the header. Options: above-main-content or above-sidebar.

To extend the functionality of the default global header, include any the following attributes in your global header entry:

mountPoint
Specifies the location of the header. Use application/header to specify it as a global header. You can configure several global headers at different positions by adding entries to the mountPoints field.
importName

Specifies the component exported by the global header plugin.

The red-hat-developer-hub.backstage-plugin-global-header package (enabled by default) offers the following header components as possible mount point values:

  • SearchComponent: Adds a search bar (enabled by default).
  • Spacer: Adds spacing in the header to position buttons at the end. Useful when you disable SearchComponent.
  • HeaderIconButton: Adds an icon button. By default, the Self-service icon button remains enabled.
  • SupportButton: Adds a Support icon button, allowing users to configure a link to an internal or external page. Enabled by default but requires additional configuration to display.
  • NotificationButton: Adds a Notifications icon button to display unread notifications in real time and navigate to the Notifications page. Enabled by default (requires the notifications plugin).
  • Divider: Adds a vertical divider. By default, a divider appears between the profile dropdown and other header components.
  • ProfileDropdown: Adds a profile dropdown showing the logged-in user’s name. By default, it contains two menu items.
  • MenuItemLink: Adds a link item in a dropdown menu. By default, the profile dropdown includes a link to the Settings page.
  • LogoutButton: Adds a logout button in the profile dropdown (enabled by default).
  • CreateDropdown: Adds a Self-service dropdown button (disabled by default). The menu items are configurable.
  • SoftwareTemplatesSection: Adds a list of software template links to the Self-service dropdown menu (disabled by default). You must enable CreateDropdown.
  • RegisterAComponentSection: Adds a link to the Register a Component page in the Self-service dropdown menu (disabled by default). You must enable CreateDropdown.
config.position
Specifies the position of the header. Supported values are above-main-content and above-sidebar.

Prerequisites

  • You must configure the support URL in the app-config.yaml file to display the Support button in the header.
  • You must install the notifications plugin to display the Notifications button in the header.

Procedure

  1. Copy the default configuration and modify the field values to suit your needs. You can adjust the priority value of each header component to control its position. Additionally, you can enable or disable components by adding or removing them from the configuration. To ensure that the remaining header buttons align with the end of the header before the profile dropdown button, set config.props.growFactor to 1 in the Spacer mount point to enable the Spacer component. For example: 

    - mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 100
    props:
      growFactor: 1
    Copy to Clipboard Toggle word wrap

  2. To use your custom header, you must install it as a dynamic plugin by adding your plugin configuration to your app-config-dynamic.yaml file. For example: 

    - package: <npm_or_oci_package-reference>
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        <package_name>:
          mountPoints:
            - mountPoint: application/header
              importName: <application_header_name>
              config:
                position: above-main-content
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 100
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 90
    Copy to Clipboard Toggle word wrap

    where:

    <npm_or_oci_package-reference>
    Specifies the package name.
    <application_header_name>
    Specifies the name of the application header. For example: MyHeader
    <header_component_name>

    Specifies the name of the header component. For example: MyHeaderComponent

    Note

    importName is an optional name referencing the value returned by the scaffolder field extension API.

  3. Optional: To disable the global header, set the value of the disabled field to true in your dynamic-plugins.yaml file. For example: 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
  disabled: true
    Copy to Clipboard Toggle word wrap

7.2. Mount points for dynamic plugin integration
Link kopieren

You can customize the application header in Developer Hub using mount points for dynamic plugins. These mount points give flexibility in configuring the position of the header, its components and dropdown menus. You can create a customized experience with the following enhancements:

application/header
Controls the header position. Use config.position to set placement as either above-main-content or above-sidebar.
global.header/component

Configures header components. Use config.priority to set the order of components, and pass properties (including CSS styles) via config.props.

  • Self-service button 

    - mountPoint: global.header/component
  importName: HeaderIconButton
  config:
    priority: 80
    props:
      title: Self-service
      icon: add
      to: create
    Copy to Clipboard Toggle word wrap

  • Spacer element 

    - mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 99
    props:
      growFactor: 0
    Copy to Clipboard Toggle word wrap

  • Divider element 

    mountPoints:
  - mountPoint: global.header/component
    importName: Divider
    config:
      priority: 150
    Copy to Clipboard Toggle word wrap
global.header/profile

Configures the profile dropdown list when the ProfileDropdown component is enabled.

  • Adding a settings link to the profile dropdown 

    - mountPoint: global.header/profile
  importName: MenuItemLink
  config:
    priority: 100
    props:
      title: Settings
      link: /settings
      icon: manageAccounts
    Copy to Clipboard Toggle word wrap
global.header/create

Configures the create dropdown list when the CreateDropdown component is enabled.

  • Adding a section for registering a component 

    - mountPoint: global.header/create
  importName: RegisterAComponentSection
  config:
    props:
      growFactor: 0
    Copy to Clipboard Toggle word wrap

7.3. Configuring the logo in the global header
Link kopieren

You can configure a company logo in the global header of the Red Hat Developer Hub (RHDH) to reflect your company’s branding. CompanyLogo is part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options.

This component supports the following props, which are provided through configuration:

  • logo: The base64 encoded logo image.
  • to: The redirect path for when users click the logo is '/catalog'.
  • width: The logo width is optional and defaults to 150 px.
  • height: The logo height is optional and defaults to 40px.

Procedure

  1. To display a custom company logo in the global header, update the configuration with a mount point for CompanyLogo:

    + 

# ...rest of the global header configuration
red-hat-developer-hub.backstage-plugin-global-header:
  mountPoints:
    - mountPoint: application/header
      importName: GlobalHeader
      config:
        # Supported values: `above-main-content` | `above-sidebar`
        position: above-main-content

    - mountPoint: global.header/component
      importName: CompanyLogo
      config:
        priority: 200
        props:
          # Path to navigate when users click the logo:
          to: '/catalog'
          width: 300
          height: 200
          logo: <string> or <object> # Logo can be a base64 string or theme-specific object
            # Example 1: Single logo for all themes
            # logo: "<base64_encoded_images>"

            # Example 2: Theme-specific logos
            # logo:
                dark: 'data:image/png;base64,...' # Used in dark theme
                light: 'data:image/png;base64,...' # Used in light theme
Copy to Clipboard Toggle word wrap

  1. (Optional) If you do not provide logo props to the CompanyLogo component, the component instead uses values defined under app.branding in your app-config.yaml file. You can configure the CompanyLogo as shown in the following configuration:

    + 

app:
  branding:
    fullLogoWidth: 220  # Fallback width
    fullLogo: <string> or <object> #fullLogo can be a base64 string or theme-specific object

    # Example 1: Single logo for all themes
    #fullLogo: "<base64_encoded_image>
    # Example 2: Theme-specific logos
    #fullLogo:
        dark: 'data:image/png;base64,...' # Used in dark theme
        light: 'data:image/png;base64,...' # Used in light theme
Copy to Clipboard Toggle word wrap

+ CompanyLogo uses the following configuration elements to control fallback and sizing behavior:

  • Logo source priority

    • The component selects the logo source in the following order:

      First, CompanyLogo props (logo, logo.light, logo.dark), then, app.branding.fullLogo. If you do not provide a logo through either, the component displays the default Developer Hub theme-specific logo.

  • Logo width priority

    • The component applies the first available value from props.width, then app.branding.fullLogoWidth from app-config.yaml. If you do not specify the width using either, the component applies a default width (150 px).
Note

CompanyLogo preserves the images aspect ratio and never crops or distorts it. If the configured width results in a height greater than the maximum allowed (default: 40px), the image is automatically scaled down. As a result, adjusting only the width may not visibly change the logo unless the height is also configured.

Increasing the logo height increases the height of the global header. The component first applies the value from props.height. If you do not specify the height, the component applies a default height (40px).

Verification

  1. The logo appears correctly in the global header.
  2. Click the logo to confirm it redirects to the path you defined in props.to.
  3. Toggle between light and dark themes to ensure the correct logo loads in each.
  4. (Optional) Temporarily remove the CompanyLogo props to test the fallback to app.branding.fullLogo.

7.4. Enabling logo in the sidebar
Link kopieren

You can configure a logo in the sidebar of the Red Hat Developer Hub (RHDH).

Procedure

  1. To display the logo in the sidebar, set the value of the app.sidebar.logo parameter to true as shown in the following example: 

    app:
  sidebar:
    logo: true
    Copy to Clipboard Toggle word wrap
    Note

    To display the logo in only the sidebar, remove the CompanyLogo component from the configuration.

  2. To display the same logo in the sidebar for all themes, update the configuration as shown in the following configuration: 

    app:
  sidebar:
    logo: true
  branding:
    fullLogoWidth: 220
    fullLogo: 'data:image/svg+xml;base64,...'
    Copy to Clipboard Toggle word wrap

  3. For theme-specific logos, you can configure the sidebar logo as shown in the following configuration: 

    app:
  sidebar:
    logo: true
  branding:
    fullLogoWidth: 220
    fullLogo:
      light: 'data:image/svg+xml;base64,...'
      dark: 'data:image/svg+xml;base64,...'
    Copy to Clipboard Toggle word wrap

Verification

  1. The logo appears correctly in the sidebar.
  2. Toggle between light and dark themes to ensure the correct logo loads in each.

7.5. Displaying the preferred username in the profile dropdown
Link kopieren

You can display the preferred username in the global header profile drop-down list by configuring spec.profile.displayName in the user entity. When not configured, the application falls back to a metadata.title. If neither is configured, it defaults to a user-friendly name generated by the useProfileInfo hook.

Procedure

  • When you configure spec.profile.displayName, use the following code: 

    apiVersion: backstage.io/v1alpha1
kind: User
metadata:
  # Required unique username
  name: <my_display_name>
  # Optional preferred title
  title: <display_name_title>
spec:
  profile:
    # Optional preferred display name (highest priority)
    displayName: <my_display_name>
  memberOf: [janus-authors]
    Copy to Clipboard Toggle word wrap

  • When you do not configure spec.profile.displayname but configure metadata.title, use the following code: 

    apiVersion: backstage.io/v1alpha1
kind: User
metadata:
  # Required unique username
  name: <my_display_name>
  # Optional preferred title
  title: <display_name_title>
spec:
  memberOf: [janus-authors]
    Copy to Clipboard Toggle word wrap

  • When you do not configure the spec.profile.displayname and the metadata.title, use the following code: 

    apiVersion: backstage.io/v1alpha1
kind: User
metadata:
  # Required unique username
  name: <my_display_name>
spec:
  memberOf: [janus-authors]
    Copy to Clipboard Toggle word wrap
Note

The application falls back to metadata.name when you do not register the user entity.

Nach oben
Red Hat logoGithubredditYoutubeTwitter

Lernen

Testen, kaufen und verkaufen

Communitys

Über Red Hat Dokumentation

Wir helfen Red Hat Benutzern, mit unseren Produkten und Diensten innovativ zu sein und ihre Ziele zu erreichen – mit Inhalten, denen sie vertrauen können. Entdecken Sie unsere neuesten Updates.

Mehr Inklusion in Open Source

Red Hat hat sich verpflichtet, problematische Sprache in unserem Code, unserer Dokumentation und unseren Web-Eigenschaften zu ersetzen. Weitere Einzelheiten finden Sie in Red Hat Blog.

Über Red Hat

Wir liefern gehärtete Lösungen, die es Unternehmen leichter machen, plattform- und umgebungsübergreifend zu arbeiten, vom zentralen Rechenzentrum bis zum Netzwerkrand.

Theme

© 2025 Red Hat