Repository: redhat-developer/red-hat-developers-documentation-rhdh
Pull request #954: RHIDP-5490: Configure global header in RHDH
Author: login: jmagak
Labels: name: Technical review done :partly_sunny:
description: Any procedure has been succesfully tested
name: Ready to merge  :guard:
name: Peer review done :blue_book:
name: lgtm
Created: 2025-02-26T13:27:05Z | Merged: 2025-03-21T19:38:46Z

<!--- PR title format: [GH#<gh-issue-id>][BZ#<bz-issue-id>][RHIDP#<jira-issue-id>]: <short-description-of-the-pr> --->

<!--- If your changes apply to the latest released and/or in-development version of RHDH, open your PR against the `main` branch and cherrypick your PR to any released branches that you want to apply your changes to. --->

**IMPORTANT: Do Not Merge - To be merged by Docs Team Only**

**Version(s):** main, 1.5
<!--- Specify the version(s) of RHDH that your PR applies to. -->
Add the relevant labels to the Pull Request.
**Issue:** https://issues.redhat.com/browse/RHIDP-5490
<!--- Add a link to the Jira issue. --->

Preview: [6. Configuring the global header in Red Hat Developer Hub](https://redhat-developer.github.io/red-hat-developers-documentation-rhdh/pr-954/customizing/#configuring-the-global-header-in-rhdh)



Diff:
diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc
new file mode 100644
index 00000000000..bc7c14a2bdd
--- /dev/null
+++ b/assemblies/assembly-configuring-the-global-header.adoc
@@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product-short} global header includes the following components:
+
+* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within {product-short}
+* *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 {product-short}
+* *Plugin extension capabilities* provide a preinstalled and enabled catalog of available plugins in {product-short}
+* *User profile* drop-down menu provides access to profile settings, appearance customization, {product-short} metadata, and a logout button
+
+include::modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc[leveloffset=+1]
+
+
+include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]
\ No newline at end of file
diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
new file mode 100644
index 00000000000..a7a3d4c69ab
--- /dev/null
+++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
@@ -0,0 +1,167 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+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 on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+.Default global header configuration
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
+    disabled: false
+    pluginConfig:
+      app:
+        sidebar:
+          search: false    <1>
+          settings: false  <2>
+      dynamicPlugins:
+        frontend:
+          default.main-menu-items: <3>
+            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 <4>
+              - 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: Create...
+                    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
+----
+<1> *search*: Hides the *Search* modal in the sidebar menu. Change it to `true` to display the *Search* modal in the sidebar.
+<2> *settings*: Hides the *Settings* button in the sidebar menu. Change it to `true` to display the *Settings* button in the sidebar.
+<3> `default.main-menu-items`: Hides the *Create* button from the sidebar menu. Remove this field to display the *Create* button in the sidebar.
+<4> *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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 `{my-app-config-file}` file to display the *Support* button in the header.
+* You must install the notifications plugin to display the *Notifications* button in the header.
+
+.Procedure
+
+. 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:
++
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 100
+    props:
+      growFactor: 1
+----
+
+. 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:
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+- 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
+----
++
+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.
+====
+. Optional: To disable the global header, set the value of the `disabled` field to `true` in your `dynamic-plugins.yaml` file. For example:
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
+  disabled: true
+----
\ No newline at end of file
diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc
new file mode 100644
index 00000000000..3e3b91a3641
--- /dev/null
+++ b/modules/configuring-the-global-header/proc-mount-points.adoc
@@ -0,0 +1,73 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
++
+.Example adding a *Self-service* button
+[source,yaml,subs="attributes,quotes"]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: *Self-service*
+      icon: add
+      to: create
+----
++
+.Example adding a spacer element
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 99
+    props:
+      growFactor: 0
+----
++
+.Example adding a divider element
+[source,yaml]
+----
+mountPoints:
+  - mountPoint: global.header/component
+    importName: Divider
+    config:
+      priority: 150
+----
+
+global.header/profile::
+Configures the profile dropdown list when the `ProfileDropdown` component is enabled.
++
+.Example adding a settings link to the profile dropdown
+[source,yaml]
+----
+- mountPoint: global.header/profile
+  importName: MenuItemLink
+  config:
+    priority: 100
+    props:
+      title: Settings
+      link: /settings
+      icon: manageAccounts
+----
+
+global.header/create::
+Configures the create dropdown list when the `CreateDropdown` component is enabled.
++
+.Example adding a section for registering a component
+[source,yaml]
+----
+- mountPoint: global.header/create
+  importName: RegisterAComponentSection
+  config:
+    props:
+      growFactor: 0
+----
\ No newline at end of file
diff --git a/titles/customizing/master.adoc b/titles/customizing/master.adoc
index 99fe89b2c93..6b5ea1f5a56 100644
--- a/titles/customizing/master.adoc
+++ b/titles/customizing/master.adoc
@@ -23,6 +23,9 @@ include::assemblies/assembly-configuring-templates.adoc[leveloffset=+1]
 include::modules/customizing-the-learning-paths/proc-customize-rhdh-learning-paths.adoc[leveloffset=+1]
 
 
+include::assemblies/assembly-configuring-the-global-header.adoc[leveloffset=+1]
+
+
 include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1]
 
 


Reviews:
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T09:47:15Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T09:49:25Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T09:53:54Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T09:56:41Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T09:56:58Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T09:57:35Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T09:58:08Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T10:04:21Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T10:08:06Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T10:08:27Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T10:17:04Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T13:04:05Z
user: login: themr0c
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T13:05:37Z
user: login: ciiay
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-14T19:32:58Z
user: login: christoph-jerolimov
body: This looks really good from my side. Just a few opinionated comments that you can follow or not:
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-17T10:19:19Z
user: login: linfraze
body: A couple considerations and suggestions to improve clarity and consistency within and across docs
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-17T18:50:06Z
user: login: ciiay
body: Hi @jmagak , it looks really good, just left a small question. Thank you for the great work 👏 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-19T22:03:38Z
user: login: jmagak
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-19T22:27:07Z
user: login: ciiay
body: Thank you for the PR, it looks nice, just found a small wording issue.
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-20T16:06:30Z
user: login: ciiay
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-20T16:33:24Z
user: login: linfraze
body: A few minor things that would be good to fix before merging if we have time
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-20T20:32:53Z
user: login: jmagak
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-20T21:34:53Z
user: login: ciiay
body: Hi @jmagak , I have added some comments to address @benwilcock 's concern from testing day. Let me know if you have further questions. Also let's ask Ben for confirmation too once you finish this update. Thank you 🙌 
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-21T01:08:23Z
user: login: jmagak
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-21T08:57:12Z
user: login: linfraze
body: Nice doc! A couple optional suggestions, but this looks good to go.
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-21T15:28:18Z
user: login: jmagak
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-21T15:48:03Z
user: login: ciiay
body: /lgtm

Thank you for the PR ❤️ 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-21T16:59:05Z

Review comments:
diff_hunk: @@ -0,0 +1,8 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: customizing-the-global-header
+[id="assembly-customizing-red-hat-developer-hub-global-header"]
+= Customizing the {product} global header
+
+As an administrator, you can enable or disable the {product} global header to create a consistent and flexible navigation bar across your {product-custom-resource-type} instance. You can extend the global header with additional buttons and customize the order and position of icons and features. By default, the {product} global header includes a search field, create, support and notification buttons, and a user profile drop-down.
path: assemblies/assembly-customizing-the-global-header.adoc
user: login: themr0c
body: tech accuracy

```suggestion
As an administrator, you can enable or disable the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance. You can extend the global header with additional buttons and customize the order and position of icons and features. By default, the {product} global header includes a search field, create, support and notification buttons, and a user profile drop-down.
```
created_at: 2025-03-07T09:47:15Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,8 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: customizing-the-global-header
+[id="assembly-customizing-red-hat-developer-hub-global-header"]
+= Customizing the {product} global header
+
+As an administrator, you can enable or disable the {product} global header to create a consistent and flexible navigation bar across your {product-custom-resource-type} instance. You can extend the global header with additional buttons and customize the order and position of icons and features. By default, the {product} global header includes a search field, create, support and notification buttons, and a user profile drop-down.
+
+include::modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc[leveloffset=+1]
path: assemblies/assembly-customizing-the-global-header.adoc
user: login: themr0c
body: This is an assembly with only one procedure. For minimalism, consider removing the assembly, and moving the assembly introduction to the procedure.
created_at: 2025-03-07T09:49:25Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Move the assembly introduction here, and put information in a logical order (default behavior, why change, what you can change).

```suggestion
By default, the {product} global header includes a search field, create, support and notification buttons, and a user profile drop-down.
As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
You can extend the global header with additional buttons and customize the order and position of icons and features.
```
created_at: 2025-03-07T09:53:54Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `app-config.yaml` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+* Install your own header as a dynamic plugin as shown in the following example:
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Procedure steps should be a numbered list. See  https://redhat-documentation.github.io/modular-docs/#con-creating-procedure-modules_writing-mod-docs and https://redhat-documentation.github.io/modular-docs/#modular-docs-procedure-examples

```suggestion
. Install your own header as a dynamic plugin as shown in the following example:
```
created_at: 2025-03-07T09:56:41Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `app-config.yaml` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+* Install your own header as a dynamic plugin as shown in the following example:
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+# Custom header implementation
+- package: <npm or oci package-reference>
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: <Header component name>
+              config:
+                position: above-main-content
+----
+
+* To disable the global header, disable the right plugin in your `app-config.yaml` configuration file as follows:
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Procedure steps should be a numbered list. See [redhat-documentation.github.io/modular-docs#con-creating-procedure-modules_writing-mod-docs](https://redhat-documentation.github.io/modular-docs/#con-creating-procedure-modules_writing-mod-docs) and [redhat-documentation.github.io/modular-docs#modular-docs-procedure-examples](https://redhat-documentation.github.io/modular-docs/#modular-docs-procedure-examples)

```suggestion
. To disable the global header, disable the right plugin in your `app-config.yaml` configuration file as follows:
```
created_at: 2025-03-07T09:56:57Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `app-config.yaml` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+* Install your own header as a dynamic plugin as shown in the following example:
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+# Custom header implementation
+- package: <npm or oci package-reference>
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: <Header component name>
+              config:
+                position: above-main-content
+----
+
+* To disable the global header, disable the right plugin in your `app-config.yaml` configuration file as follows:
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Additionally, use the attribute for `app-config.yaml` 
created_at: 2025-03-07T09:57:35Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `app-config.yaml` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+* Install your own header as a dynamic plugin as shown in the following example:
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Additionally, specify in the step which file the user is editing.
created_at: 2025-03-07T09:58:08Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `app-config.yaml` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+* Install your own header as a dynamic plugin as shown in the following example:
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+# Custom header implementation
+- package: <npm or oci package-reference>
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: <Header component name>
+              config:
+                position: above-main-content
+----
+
+* To disable the global header, disable the right plugin in your `app-config.yaml` configuration file as follows:
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+# Disabling global header
+- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
+  disabled: true
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Can you verify the content goes into the `app-config.yaml` file and not into `dynamic-plugins.yaml`? 

The content looks like content we are used to see in the `dynamic-plugins.yaml` but not in the `app-config.yaml` file. See `dynamic-plugins.yaml` examples in See https://docs.redhat.com/en/documentation/red_hat_developer_hub/1.4/html/installing_and_viewing_plugins_in_red_hat_developer_hub/rhdh-installing-rhdh-plugins_title-plugins-rhdh-about#proc-config-dynamic-plugins-rhdh-operator_rhdh-installing-rhdh-plugins
created_at: 2025-03-07T10:04:21Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `app-config.yaml` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+* Install your own header as a dynamic plugin as shown in the following example:
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+# Custom header implementation
+- package: <npm or oci package-reference>
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: <Header component name>
+              config:
+                position: above-main-content
+----
+
+* To disable the global header, disable the right plugin in your `app-config.yaml` configuration file as follows:
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+# Disabling global header
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Remove fluff. 

```suggestion
```
created_at: 2025-03-07T10:08:06Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+To replace the {product} global header with a custom header of choice, disable the default header.
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `app-config.yaml` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+* Install your own header as a dynamic plugin as shown in the following example:
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+# Custom header implementation
path: modules/customizing-the-global-header/proc-customizing-rhdh-global-header.adoc
user: login: themr0c
body: Remove fluff.


```suggestion
```
created_at: 2025-03-07T10:08:27Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,8 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: customizing-the-global-header
+[id="assembly-customizing-red-hat-developer-hub-global-header"]
+= Customizing the {product} global header
+
+As an administrator, you can enable or disable the {product} global header to create a consistent and flexible navigation bar across your {product-custom-resource-type} instance. You can extend the global header with additional buttons and customize the order and position of icons and features. By default, the {product} global header includes a search field, create, support and notification buttons, and a user profile drop-down.
path: assemblies/assembly-customizing-the-global-header.adoc
user: login: themr0c
body: Consider refining the scope for consistency: 

* The introduction promise is to *extend* the global header. Logically, you would expect to continue using the default global header, and learn how to modify its behavior.
* The procedure explains how to *replace* the global header entirely, with an custom plugin (but does not explain how to create the plugin). 

Additionnally, the corresponding engineering task is not completed: https://issues.redhat.com/browse/RHIDP-4659. Maybe we should wait for the engineering feature before documenting?
created_at: 2025-03-07T10:17:03Z
author_association: MEMBER
diff_hunk: @@ -11,6 +11,9 @@ include::artifacts/attributes.adoc[]
 include::modules/customizing/proc-customizing-your-product-title.adoc[leveloffset=+1]
 
 
+include::modules/customizing/proc-customizing-product-global-header.adoc[leveloffset=+1]
+
+
path: titles/customizing/master.adoc
user: login: themr0c
body: I believe configuring the base URL should come first, as it is a mandatory configuration.
created_at: 2025-03-11T13:04:05Z
author_association: MEMBER
diff_hunk: @@ -11,6 +11,9 @@ include::artifacts/attributes.adoc[]
 include::modules/customizing/proc-customizing-your-product-title.adoc[leveloffset=+1]
 
 
+include::modules/customizing/proc-customizing-product-global-header.adoc[leveloffset=+1]
+
+
path: titles/customizing/master.adoc
user: login: themr0c
body: Consider rather including the module as first section in _Customizing Red Hat Developer Hub appearance_
created_at: 2025-03-11T13:05:36Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
+
+`mountPoint`::
+Defines where the header will be added. Use `application/header` to specify it as a global header.
+
+`importName`::
+Specifies the component exported by the global header plugin.
+
+`config.layout.position`::
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: ```suggestion
`config.position`::
```
created_at: 2025-03-14T17:26:25Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,59 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: ciiay
body: ```suggestion
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`.

Examples:
```
created_at: 2025-03-14T19:24:01Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,59 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+.Adding a `Create` button
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: Create...
+      icon: add
+      to: create
+----
+
+.Adding a spacer element
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 99
+    props:
+      growFactor: 0
+global.header/profile: Configures the profile dropdown list when the `ProfileDropdown` component is enabled.
+----
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: ciiay
body: ```suggestion
----

global.header/profile::
Configures the profile dropdown list when the `ProfileDropdown` component is enabled.

Example:
```
created_at: 2025-03-14T19:27:18Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,59 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+.Adding a `Create` button
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: Create...
+      icon: add
+      to: create
+----
+
+.Adding a spacer element
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 99
+    props:
+      growFactor: 0
+global.header/profile: Configures the profile dropdown list when the `ProfileDropdown` component is enabled.
+----
+
+.Adding a settings link to the profile dropdown
+[source,yaml]
+----
+- mountPoint: global.header/profile
+  importName: MenuItemLink
+  config:
+    priority: 100
+    props:
+      title: Settings
+      link: /settings
+      icon: manageAccounts
+global.header/create: Configures the create dropdown list when the `CreateDropdown` component is enabled.
+----
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: ciiay
body: ```suggestion
----

global.header/create::
Configures the create dropdown list when the `CreateDropdown` component is enabled.

Example:
```
created_at: 2025-03-14T19:28:07Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,59 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+.Adding a `Create` button
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: ciiay
body: Shall we rename `Create` to `Self-service` as there's a ticket [RHIDP-6164](https://issues.redhat.com/browse/RHIDP-6164) to do so?

```suggestion
.Adding a `Self-service` button
```
created_at: 2025-03-14T19:30:52Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,59 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+.Adding a `Create` button
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: Create...
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: ciiay
body: ```suggestion
      title: Self-service
```
created_at: 2025-03-14T19:32:42Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following:
+
+* Search input field
+* Create button linking to software templates
+* Support for internal and external links, for example, support and notification icons
+* Notification buttons
+* User profile and create drop-down
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: christoph-jerolimov
body: There is no create dropdown in 1.5. There is just the create button that you have mentioned as bullet point 2

```suggestion
* User profile drop-down
```
created_at: 2025-03-17T10:14:55Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following:
+
+* Search input field
+* Create button linking to software templates
+* Support for internal and external links, for example, support and notification icons
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: christoph-jerolimov
body: I personally would not mention the notificaiton icon here since the next bullet point mention this explicit. Wdyt about:

```suggestion
* Support button that can link an internal or external support page
```
created_at: 2025-03-17T10:16:38Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,69 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+Examples:
+
+.Adding a `self-service` button
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: self-service
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: christoph-jerolimov
body: This is a button title and should be "Self-Service" not "self-service" imo.

```suggestion
      title: Self-service
```
created_at: 2025-03-17T10:18:26Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,69 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+Examples:
+
+.Adding a `self-service` button
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: christoph-jerolimov
body: Same here:

```suggestion
.Adding a `Self-service` button
```
created_at: 2025-03-17T10:18:33Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following:
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: linfraze
body: The following what? Functions? Features? Capabilities? 
created_at: 2025-03-17T18:10:27Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following:
+
+* Search input field
+* Create button linking to software templates
+* Support for internal and external links, for example, support and notification icons
+* Notification buttons
+* User profile and create drop-down
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: linfraze
body: ```suggestion
* User profile drop-down menu
```

also consider adding some info to explain the purpose of this / show why this is a value-add 
created_at: 2025-03-17T18:10:46Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following:
+
+* Search input field
+* Create button linking to software templates
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: linfraze
body: > linking to software templates

I don't really understand what we mean by this. Or what this button helps the user create. 
created_at: 2025-03-17T18:13:48Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following:
+
+* Search input field
+* Create button linking to software templates
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: linfraze
body: If **Create** is a button on the UI, bold it to comply with IBM style guidance on UI elements: https://www.ibm.com/docs/en/ibm-style?topic=elements-ui
created_at: 2025-03-17T18:14:29Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following:
+
+* Search input field
+* Create button linking to software templates
+* Support for internal and external links, for example, support and notification icons
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: linfraze
body: If **Support** is a button on the UI, bold it to comply with IBM style guidance on UI elements: https://www.ibm.com/docs/en/ibm-style?topic=elements-ui
created_at: 2025-03-17T18:14:43Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: ```suggestion
You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
```
created_at: 2025-03-17T18:16:02Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: If these are optional, rewrite to explain. Otherwise, if the user is required to use all of these attributes, then leave as-is.
 
```suggestion
To extend the functionality of the default global header, include any the following attributes in your global header entry:
```
created_at: 2025-03-17T18:18:13Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
+
+`mountPoint`::
+Defines where the header will be added. Use `application/header` to specify it as a global header.
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: ```suggestion
Specifies the location of the header. Use `application/header` to specify it as a global header.
```
to make present tense
created_at: 2025-03-17T18:21:02Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
+
+`mountPoint`::
+Defines where the header will be added. Use `application/header` to specify it as a global header.
+
+`importName`::
+Specifies the component exported by the global header plugin.
+
+`config.position`::
+Determines the header's position. Supported values are `above-main-content` and `above-sidebar`.
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: ```suggestion
Specifies the position of the header. Supported values are `above-main-content` and `above-sidebar`.
```
to comply with IBM style guidance on possessives: https://www.ibm.com/docs/en/ibm-style?topic=grammar-possessives

to use parallel language for all definitions - _Specifies_ is common
created_at: 2025-03-17T18:22:10Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
+
+`mountPoint`::
+Defines where the header will be added. Use `application/header` to specify it as a global header.
+
+`importName`::
+Specifies the component exported by the global header plugin.
+
+`config.position`::
+Determines the header's position. Supported values are `above-main-content` and `above-sidebar`.
+
+[NOTE]
+====
+You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+====
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: Is this written correctly? I don't think we want to say CR instance, do we? We usually use "instance" in reference to the RHDH ({product}) instance. 
created_at: 2025-03-17T18:27:00Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
+
+`mountPoint`::
+Defines where the header will be added. Use `application/header` to specify it as a global header.
+
+`importName`::
+Specifies the component exported by the global header plugin.
+
+`config.position`::
+Determines the header's position. Supported values are `above-main-content` and `above-sidebar`.
+
+[NOTE]
+====
+You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+====
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+. Install your own header as a dynamic plugin. For example, add the following plugin definition to your `dynamic-plugins.default.yaml` file:
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: ```suggestion
. Install your custom header as a dynamic plugin. For example, add the following plugin definition to your `dynamic-plugins.default.yaml` file:
```
created_at: 2025-03-17T18:27:33Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
+
+`mountPoint`::
+Defines where the header will be added. Use `application/header` to specify it as a global header.
+
+`importName`::
+Specifies the component exported by the global header plugin.
+
+`config.position`::
+Determines the header's position. Supported values are `above-main-content` and `above-sidebar`.
+
+[NOTE]
+====
+You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+====
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+. Install your own header as a dynamic plugin. For example, add the following plugin definition to your `dynamic-plugins.default.yaml` file:
++
+.`dynamic-plugins.yaml` fragment
+[source,yaml,subs="+attributes,+quotes"]
+----
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: ```suggestion
. Install your custom header as a dynamic plugin by adding your custom plugin configuration to your `dynamic-plugins.default.yaml` file. For example:
+
[source,yaml,subs="+attributes,+quotes"]
----
```
created_at: 2025-03-17T18:29:35Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,58 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+Using dynamic plugins, you can extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+Include the following attributes in your global header entry:
+
+`mountPoint`::
+Defines where the header will be added. Use `application/header` to specify it as a global header.
+
+`importName`::
+Specifies the component exported by the global header plugin.
+
+`config.position`::
+Determines the header's position. Supported values are `above-main-content` and `above-sidebar`.
+
+[NOTE]
+====
+You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+====
+
+.Prerequisites
+* You have configured your {product-custom-resource-type} instance.
+* You have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notification plugin.
+
+.Procedure
+
+. Install your own header as a dynamic plugin. For example, add the following plugin definition to your `dynamic-plugins.default.yaml` file:
++
+.`dynamic-plugins.yaml` fragment
+[source,yaml,subs="+attributes,+quotes"]
+----
+- package: `_<npm_or_oci_package-reference>_`
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: `_<Header_component_name>_`
+              config:
+                position: above-main-content
+----
++
+[NOTE]
+====
+`importName` is an optional name referencing the value returned by the scaffolder field extension API.
+====
+. To disable the global header, disable the right plugin in your `dynamic-plugins.yaml` file as follows:
++
+.`dynamic-plugins.yaml` fragment
+[source,yaml,subs="+attributes,+quotes"]
+----
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: ```suggestion
```suggestion
. Optional: To disable the global header, set the value of the `disabled` field to `true` in your `dynamic-plugins.yaml` file. For example:
+
[source,yaml,subs="+attributes,+quotes"]
----
```

to better align with the way that this step is written in other RHDH docs / to improve consistency across RHDH docs
created_at: 2025-03-17T18:32:12Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,69 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+Examples:
+
+.Adding a `self-service` button
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: linfraze
body: If the button is called Self-service on the UI, then we also want to **bold** it
created_at: 2025-03-17T18:35:02Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,69 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+Examples:
+
+.Adding a `self-service` button
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: self-service
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: linfraze
body: @christoph-jerolimov agree that when we typically reference a UI element in the docs, we want to match the UI exactly (and bold it per IBM style guidance), but does the matching rule also apply to code, like in this example? Code usually has its own formatting standards. 
created_at: 2025-03-17T18:35:16Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,69 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+Examples:
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: linfraze
body: To make this easier to follow, maybe we could say what these are examples of? And maybe make it a heading and then make the actual example headings sub-headings? Like this...

.Examples configurations of the [component the user is configuring]

..Adding a **Self-service** button


created_at: 2025-03-17T18:45:24Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following components:
+
+* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within {product-short}
+* *Support* button that can link an internal or external support page
+* Notification button displays alerts and updates from plugins and external services
+* Search input field allows users to find services, components, documentation, and other resources within {product}
+* Plugin extension capabilities provide a pre-installed and enabled catalog of available plugins in {product}
+* User profile drop-down menu provides access to profile settings, appearance customization, {product-short} metadata, and a logout button
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: ciiay
body: Is there a reason why only `Create` and `Support` are being bold? Just out of curiosity.
created_at: 2025-03-19T22:02:55Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following components:
+
+* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within {product-short}
+* *Support* button that can link an internal or external support page
+* Notification button displays alerts and updates from plugins and external services
+* Search input field allows users to find services, components, documentation, and other resources within {product}
+* Plugin extension capabilities provide a pre-installed and enabled catalog of available plugins in {product}
+* User profile drop-down menu provides access to profile settings, appearance customization, {product-short} metadata, and a logout button
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: jmagak
body: > Is there a reason why only `Create` and `Support` are being bold? Just out of curiosity.

Sure, these are buttons on the UI. I have updated the other components to ensure consistency in the documentation.
created_at: 2025-03-19T22:27:07Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following components:
+
+* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within {product-short}
+* *Support* button that can link an internal or external support page
+* *Notification* button displays alerts and updates from plugins and external services
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: ciiay
body: The official name of this plugin should be "Notifications", so I think the button name should also be in plural?
 ```suggestion
* *Notifications* button displays alerts and updates from plugins and external services
```
created_at: 2025-03-20T15:58:32Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,56 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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.
+
+`importName`::
+Specifies the component exported by the global header plugin.
+
+`config.position`::
+Specifies the position of the header. Supported values are `above-main-content` and `above-sidebar`.
+
+[NOTE]
+====
+You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+====
+
+.Prerequisites
+* You have configured your {product} instance.
+* You have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notification plugin.
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: So is here. This is the package name: backstage-plugin-notifications.
```suggestion
* You have installed the notifications plugin.
```
created_at: 2025-03-20T16:05:41Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,56 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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.
+
+`importName`::
+Specifies the component exported by the global header plugin.
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: Hi @christoph-jerolimov , do you think we should give a list of current available header components that are ready for use and explain what it does for each one here? Since we got the feedback from Ben saying there's no documentation of what does the Spacer component do.
```suggestion
Specifies the component exported by the global header plugin. Below is a list of available header components, configurable via the `config` field:

- **`SearchComponent`**: Adds a search bar (enabled by default).
- **`Spacer`**: Adds spacing in the header to position buttons at the end. Useful when `SearchComponent` is disabled.
- **`HeaderIconButton`**: Adds an icon button. A "Create" icon button is enabled by default.
- **`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 is placed 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, a link to the "Settings" page is included in the profile dropdown.
- **`LogoutButton`**: Adds a logout button in the profile dropdown (enabled by default).
- **`CreateDropdown`**: Adds a "Create" dropdown button (disabled by default). The menu items are configurable.
- **`SoftwareTemplatesSection`**: Adds a list of software template links to the "Create" dropdown menu (disabled by default). Requires `CreateDropdown` to be enabled.
- **`RegisterAComponentSection`**: Adds a link to the "Register a Component" page in the "Create" dropdown menu (disabled by default). Requires `CreateDropdown` to be enabled.
```
created_at: 2025-03-20T16:33:23Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following components:
+
+* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within {product-short}
+* *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 {product}
+* *Plugin extension capabilities* provide a pre-installed and enabled catalog of available plugins in {product}
+* *User profile* drop-down menu provides access to profile settings, appearance customization, {product-short} metadata, and a logout button
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: linfraze
body: We are using a mix of {product} and {product-short} attributes in this list. Choose one and use it consistently. 
created_at: 2025-03-20T19:09:01Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product} global header includes the following components:
+
+* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within {product-short}
+* *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 {product}
+* *Plugin extension capabilities* provide a pre-installed and enabled catalog of available plugins in {product}
path: assemblies/assembly-configuring-the-global-header.adoc
user: login: linfraze
body: Minor thing, but IBM and other RHDH docs use _preinstall_ vs. pre-install
created_at: 2025-03-20T19:10:17Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,56 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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.
+
+`importName`::
+Specifies the component exported by the global header plugin.
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: We avoid pointing language in enterprise docs (below, above, etc.), as well as self-referential language (this list, this procedure, etc.), so the proper way to introduce this list is something like _The following header components are possible values for the `config` field:_
created_at: 2025-03-20T19:16:21Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,70 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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.
+
+`importName`::
+Specifies the component exported by the global header plugin.
++
+Below is a list of available header components that you can configure using the `config` field:
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: ```suggestion
The following header components are possible values for the `config` field:
```

it would be helpful to also specify the configuration file that this field is in, but I'm not sure what it is, tbh. :)
created_at: 2025-03-20T19:17:39Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,70 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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.
+
+`importName`::
+Specifies the component exported by the global header plugin.
++
+Below is a list of available header components that you can configure using the `config` field:
+
+- **`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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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`.
+
+[NOTE]
+====
+You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+====
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: This can be part of the rest of the conceptual info here without being an admonition
created_at: 2025-03-20T19:59:22Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,70 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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.
+
+`importName`::
+Specifies the component exported by the global header plugin.
++
+Below is a list of available header components that you can configure using the `config` field:
+
+- **`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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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`.
+
+[NOTE]
+====
+You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+====
+
+.Prerequisites
+* You have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notifications plugin.
+
+.Procedure
+
+. Install your custom header as a dynamic plugin by adding your custom plugin configuration to your `dynamic-plugins.default.yaml` file. For example:
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+- package: `_<npm_or_oci_package-reference>_`
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: `_<Header_component_name>_`
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: I don't think the ticks are needed around the variables since this is already in a code block and `----` applies the same format to code blocks that the ticks apply to in-line code
created_at: 2025-03-20T20:01:14Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,73 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+.Example adding a *Self-service* button
+[source,yaml,subs="attributes,quotes"]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: *Self-service*
+      icon: add
+      to: create
+----
+
+.Example adding a spacer element
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 99
+    props:
+      growFactor: 0
+----
+
+.Example adding a divider element
+[source,yaml]
+----
+mountPoints:
+  - mountPoint: global.header/component
+    importName: Divider
+    config:
+      priority: 150
+----
+
+global.header/profile::
+Configures the profile dropdown list when the `ProfileDropdown` component is enabled.
+
+.Example adding a settings link to the profile dropdown
+[source,yaml]
+----
+- mountPoint: global.header/profile
+  importName: MenuItemLink
+  config:
+    priority: 100
+    props:
+      title: Settings
+      link: /settings
+      icon: manageAccounts
+----
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: linfraze
body: We typically see value definitions after the code block rather than before
created_at: 2025-03-20T20:30:54Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,73 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
+
+.Example adding a *Self-service* button
+[source,yaml,subs="attributes,quotes"]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: *Self-service*
+      icon: add
+      to: create
+----
+
+.Example adding a spacer element
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 99
+    props:
+      growFactor: 0
+----
+
+.Example adding a divider element
+[source,yaml]
+----
+mountPoints:
+  - mountPoint: global.header/component
+    importName: Divider
+    config:
+      priority: 150
+----
+
+global.header/profile::
+Configures the profile dropdown list when the `ProfileDropdown` component is enabled.
+
+.Example adding a settings link to the profile dropdown
+[source,yaml]
+----
+- mountPoint: global.header/profile
+  importName: MenuItemLink
+  config:
+    priority: 100
+    props:
+      title: Settings
+      link: /settings
+      icon: manageAccounts
+----
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: jmagak
body: > We typically see value definitions after the code block rather than before

Thank you for the suggestions,  @linfraze.
created_at: 2025-03-20T21:34:53Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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 following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file:
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: Does `dynamic-plugins.default.yaml` file make any sense to the users? I thought we didn't point them to any files from our repo. How does this look?
```suggestion
The following header components are possible mount point values for the `red-hat-developer-hub.backstage-plugin-global-header` package which is enabled by default:
```

created_at: 2025-03-20T23:50:23Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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 following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file:
+
+- **`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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notifications plugin.
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: If these two points are not meet, it won't stop the header from working, just the two icon buttons won't show up in the header. So how about changing it to this?
```suggestion
.Additional
* To display the Support button in the header, you need to configure the support URL in the `{my-app-config-file}` file.
* To display the Notifications button in the header, you need to install the notifications plugin.
```
Also, this information are also provided in the previous `importName` section, in L19 and L20. So it might be okay to remove the redundant in a way 🤔 
created_at: 2025-03-21T00:01:27Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: To include our header plugin package name, what do you think about the following expression?
```suggestion
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 own custom dynamic header plugins using the mount points provided by this new header feature, allowing for further customization to suit your needs. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
```
created_at: 2025-03-21T00:04:56Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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 following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file:
+
+- **`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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notifications plugin.
+
+.Procedure
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: I'm trying to show the default configuration before the `Procedure` section. How do you like it this way?
```suggestion
.Default configuration
+
[source,yaml,subs="+attributes,+quotes"]
----
  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
    disabled: false
    pluginConfig:
      app:
        sidebar:
          search: false    # hide the Search modal in sidebar menu, change it to `true` to display it in sidebar
          settings: false  # hide the Settings button in sidebar menu, change it to `true` to display it in sidebar
      dynamicPlugins:
        frontend:
          default.main-menu-items:  # hide the Create button from sidebar menu, remove this field to display it in sidebar
            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 # above-main-content | above-sidebar
              - 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: Create...
                    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
----
+
.Procedure
```
created_at: 2025-03-21T00:14:21Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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 following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file:
+
+- **`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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notifications plugin.
+
+.Procedure
+
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: Add a new section here to explain how to modify the current plugin.

```suggestion
. To customize the components and their `priority` in the default global header, copy the entire default configuration and modify the field values as needed. You can adjust the priority value of each header component to control its position within the header or its parent component. Additionally, you can enable or disable components by adding or removing them from the configuration. For example, removing the `SearchComponent` mount point will remove the search bar from the header. To ensure that the remaining header icon buttons align to 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. 
```
created_at: 2025-03-21T00:25:30Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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 following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file:
+
+- **`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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notifications plugin.
+
+.Procedure
+
+. Install your custom header as a dynamic plugin by adding your custom plugin configuration to your `dynamic-plugins.default.yaml` file. For example:
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+- package: _<npm_or_oci_package-reference>_
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: _<Header_component_name>_
+              config:
+                position: above-main-content
+----
++
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: ciiay
body: ```suggestion
.To use your custom header, you need to install it as a dynamic plugin by adding your plugin configuration to your `app-config-dynamic.yaml` file. For example:
+
[source,yaml,subs="+attributes,+quotes"]
----
- package: _<npm_or_oci_package-reference>_
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        <package_name>:
          mountPoints:
            - mountPoint: application/header
              importName: _<Application_Header_name>_  # e.g. `MyHeader`
              config:
                position: above-main-content
            - mountPoint: global.header/component
              importName: _<Header_component_name>  # e.g. `MyHeaderComponentA`
              config:
                priority: 100
            - mountPoint: global.header/component
              importName: _<Header_component_name>  # e.g. `MyHeaderComponentB`
              config:
                priority: 90
----
+
```
created_at: 2025-03-21T01:05:57Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+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 following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file:
+
+- **`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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 have configured the support URL in the `{my-app-config-file}` file.
+* You have installed the notifications plugin.
+
+.Procedure
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: jmagak
body: > I'm trying to show the default configuration before the `Procedure` section. How do you like it this way?

Thank you, @ciiay. I agree that we should add the default configuration before the `Procedure`. I believe having this configuration at the beginning of the section, just before introducing the various attributes in the global header entry, will also help users understand the components of the configuration. Let me know what you think about this. 
created_at: 2025-03-21T08:57:11Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,163 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+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 on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+.Default global header configuration
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+  - 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:
+            mountPoints:
+              - mountPoint: application/header
+                importName: GlobalHeader
+                config:
+                  position: above-main-content
+              - 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: Create...
+                    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
+----
+
+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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 `{my-app-config-file}` file to display the *Support* button in the header.
+* You must install the notifications plugin to display the *Notifications* button in the header.
+
+.Procedure
+
+. 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 icon 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:
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: icon buttons sounds a bit redundant - do you think we should say either icons or buttons?
created_at: 2025-03-21T15:12:22Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,163 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+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 on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+.Default global header configuration
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+  - 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:
+            mountPoints:
+              - mountPoint: application/header
+                importName: GlobalHeader
+                config:
+                  position: above-main-content
+              - 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: Create...
+                    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
+----
+
+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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 `{my-app-config-file}` file to display the *Support* button in the header.
+* You must install the notifications plugin to display the *Notifications* button in the header.
+
+.Procedure
+
+. 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 icon 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:
++
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 100
+    props:
+      growFactor: 1
+----
+
+. 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:
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: I like the clear, simple, straightforward way that this is written - TechDocs add-ons work in a similar way, so I want to copy this language into that doc for consistency :) 
created_at: 2025-03-21T15:13:33Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,163 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+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 on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+.Default global header configuration
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+  - 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:
+            mountPoints:
+              - mountPoint: application/header
+                importName: GlobalHeader
+                config:
+                  position: above-main-content
+              - 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: Create...
+                    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
+----
+
+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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 `{my-app-config-file}` file to display the *Support* button in the header.
+* You must install the notifications plugin to display the *Notifications* button in the header.
+
+.Procedure
+
+. 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 icon 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:
++
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 100
+    props:
+      growFactor: 1
+----
+
+. 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:
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+- 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
+----
++
+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`
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: linfraze
body: Nicely done! Very clear and compliant with guidelines. The only thing to note is that I think we typically use all lowercase in the variables.
created_at: 2025-03-21T15:14:52Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,73 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} 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`.
++
+.Example adding a *Self-service* button
+[source,yaml,subs="attributes,quotes"]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: *Self-service*
+      icon: add
+      to: create
+----
++
+.Example adding a spacer element
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 99
+    props:
+      growFactor: 0
+----
++
+.Example adding a divider element
+[source,yaml]
+----
+mountPoints:
+  - mountPoint: global.header/component
+    importName: Divider
+    config:
+      priority: 150
+----
+
+global.header/profile::
+Configures the profile dropdown list when the `ProfileDropdown` component is enabled.
++
+.Example adding a settings link to the profile dropdown
+[source,yaml]
path: modules/configuring-the-global-header/proc-mount-points.adoc
user: login: linfraze
body: I get that you are listing and defining the parameters and then showing an example of what it looks like in YAML, but I keep expecting the definition to come after the example and getting confused about which example the definition belongs to. We can push it forward like this, but curious if it took anyone else a sec to figure out the order
created_at: 2025-03-21T15:24:25Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,163 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+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 on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+.Default global header configuration
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+  - 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:
+            mountPoints:
+              - mountPoint: application/header
+                importName: GlobalHeader
+                config:
+                  position: above-main-content
+              - 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: Create...
+                    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
+----
+
+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 *Create* 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 *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* 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 `{my-app-config-file}` file to display the *Support* button in the header.
+* You must install the notifications plugin to display the *Notifications* button in the header.
+
+.Procedure
+
+. 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 icon 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:
path: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
user: login: jmagak
body: > icon buttons sounds a bit redundant - do you think we should say either icons or buttons?

Thank you, @linfraze. I was considering `Header icon button`, as it refers to both the header and the icon button. However, since this might seem redundant, I suggest we go with `header button `instead.
created_at: 2025-03-21T15:48:03Z
author_association: MEMBER

PR comments:
user: login: rhdh-bot
created_at: 2025-02-26T13:29:34Z
body: Updated preview: https://redhat-developer.github.io/red-hat-developers-documentation-rhdh/pr-954/ @ 03/21/25 16:11:38
author_association: COLLABORATOR
user: login: Gerry-Forde
created_at: 2025-03-21T19:40:10Z
body: /cherrypick release-1.5
author_association: MEMBER
user: login: openshift-cherrypick-robot
created_at: 2025-03-21T19:40:49Z
body: @Gerry-Forde: new pull request created: #1009

<details>

In response to [this](https://github.com/redhat-developer/red-hat-developers-documentation-rhdh/pull/954#issuecomment-2744289474):

>/cherrypick release-1.5


Instructions for interacting with me using PR comments are available [here](https://git.k8s.io/community/contributors/guide/pull-requests.md).  If you have questions or suggestions related to my behavior, please file an issue against the [kubernetes-sigs/prow](https://github.com/kubernetes-sigs/prow/issues/new?title=Prow%20issue:) repository.
</details>
author_association: CONTRIBUTOR