|
1 | 1 | [id="customizing-your-product-global-header_{context}"] |
2 | 2 | = Customizing your {product} global header |
3 | 3 |
|
4 | | -As an administrator, you can add a global header to your {product-custom-resource-type} instance. You can enable the global header by default. |
5 | | -You can do the following: |
6 | | - |
7 | | -* Add a logo, search, notifications, users settings, help, and more. |
8 | | -* Customize the order and position of icons and features by placing them on either the left or right side of the header. |
| 4 | +As an administrator, you can add a global header to create a consistent and flexible navigation bar across your {product-custom-resource-type} instance. By default, the global header includes a search field, create, support and notification buttons, and a user profile drop-down. You can customize the order and position of icons and features. |
9 | 5 |
|
10 | 6 | .Prerequisites |
11 | 7 | * You have configured your {product-custom-resource-type} instance. |
12 | | -* You have administrative access and can modify a global header. |
| 8 | +* You have configured the support url in the `app-config.yaml` file. |
| 9 | +* You have installed the notification plugin. |
13 | 10 |
|
14 | 11 | .Procedure |
15 | 12 |
|
16 | | -* Set the enabled property to `true`. For example: |
| 13 | +* To disable the global header, disable the right plugin. For example: |
17 | 14 |
|
18 | | -[source,yaml] |
| 15 | +[source,yaml,subs="+attributes,+quotes"] |
| 16 | +---- |
| 17 | +# Disabling global header |
| 18 | +- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header |
| 19 | + disabled: true |
19 | 20 | ---- |
20 | | -globalHeader: |
21 | | - enabled: true |
| 21 | + |
| 22 | +.Procedure |
| 23 | + |
| 24 | +* To replace the {product} global header with a custom header of your choice, first disable the default header. |
| 25 | + |
| 26 | +* Install your own header as a dynamic plugin as shown in the following example: |
| 27 | + |
| 28 | +[source,yaml,subs="+attributes,+quotes"] |
22 | 29 | ---- |
23 | | -* To disable this feature, update the configuration file by setting the property to `false`. |
| 30 | +# Custom header implementation |
| 31 | +- package: <npm or oci package-reference> |
| 32 | + disabled: false |
| 33 | + pluginConfig: |
| 34 | + dynamicPlugins: |
| 35 | + frontend: |
| 36 | + <package_name>: |
| 37 | + mountPoints: |
| 38 | + - mountPoint: application/header |
| 39 | + importName: <Header component name> |
| 40 | + config: |
| 41 | + position: above-main-content |
| 42 | +---- |
0 commit comments