SITES-21287: Add documentation about Header Menus

AdobeDocs · Apr 19, 2024 · 85259e3 · 85259e3
1 parent 87f39f9
commit 85259e3
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 1 deletion.
diff --git a/...services/aem-universal-editor/api/header-menu/header-menu-item-with-submenu.png b/...services/aem-universal-editor/api/header-menu/header-menu-item-with-submenu.png
diff --git a/src/pages/services/aem-universal-editor/api/header-menu/header-menu-item.png b/src/pages/services/aem-universal-editor/api/header-menu/header-menu-item.png
diff --git a/src/pages/services/aem-universal-editor/api/header-menu/index.md b/src/pages/services/aem-universal-editor/api/header-menu/index.md
@@ -5,4 +5,111 @@ contributors:
   - https://github.com/AdobeDocs/uix
 ---
 
-TBD
+# Header Menu
+
+Header menu can be customized via methods defined in `headerMenu` namespace.
+
+You have the ability to:
+
+- create multiple buttons from single extension;
+- implement drop-down menu buttons;
+- use different [variations](https://spectrum.adobe.com/page/button/#Options) of buttons from React Spectrum;
+- use any [icon](https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html#available-icons) from React Spectrum;
+
+## Custom button with callback
+
+```js
+import { register } from "@adobe/uix-guest";
+
+// ...
+
+const guestConnection = await register({
+    id: "my.company.extension-with-header-menu-button",
+    methods: {
+        headerMenu: {
+            getButtons() {
+                return [
+                    {
+                        id: "my.company.export-button",
+                        label: "Export",
+                        icon: 'Export',
+                        onClick: () => {
+                            console.log('Export button has been pressed.');
+                        },
+                    },
+                ];
+            },
+        },
+    },
+});
+```
+
+The `onClick` callback is invoked when a user clicks on the button. It does not receive any arguments.
+
+![Header menu item](./header-menu-item.png)
+
+## Custom button with sub menu
+
+```js
+import { register } from "@adobe/uix-guest";
+
+// ...
+
+const guestConnection = await register({
+    id: "my.company.extension-with-header-menu-button",
+    methods: {
+        headerMenu: {
+            async getButtons() {
+                return [
+                    {
+                        id: "my.company.export-button",
+                        label: "Export",
+                        icon: 'Export',
+                        subItems: [
+                            {
+                                id: 'xml',
+                                label: 'XML',
+                                onClick: async () => {
+                                    // ...
+                                },
+                            },
+                            {
+                                id: 'csv',
+                                label: 'CSV',
+                                onClick: async () => {
+                                    // ...
+                                },
+                            },
+                        ],
+                    },
+                ];
+            },
+        },
+    },
+});
+```
+
+![Header menu item with submenu](./header-menu-item-with-submenu.png)
+
+## API Reference
+
+### Button API
+
+| Field    | Type                                                                        | Required | Description                                                                                                                   |
+|----------|-----------------------------------------------------------------------------| ------ |-------------------------------------------------------------------------------------------------------------------------------|
+| id       | `string`                                                                    | ✔️  | **Must be unique** across all extensions. Consider adding a vendor prefix to this field                                       |
+| label    | `string`                                                                    | ✔️  | Button label that will be visible on UI                                                                                       |
+| icon     | `string`                                                                    |    | Name of a [React-Spectrum workflow icon](https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html#available-icons) |
+| variant  | `cta` <br /> `primary` <br /> `secondary` <br /> `negative` <br /> `action` |    | The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button                                             |
+| subItems | `array`                                                                     |    | A list with sub menu items.                                                                                                   |
+| onClick  | `callback(): void`                                                          |  ✔️ | A callback for a button `onClick` event                                                                                       |
+
+### Sub menu item API
+
+| Field    | Type                                                                    | Required | Description                                                                                                  |
+|----------|-------------------------------------------------------------------------| ------ |--------------------------------------------------------------------------------------------------------------|
+| id       | `string`                                                                | ✔️  | **Must be unique** across the current button sub menu                                                        |
+| label    | `string`                                                                | ✔️  | Button label that will be visible on UI                                                                      |
+| icon     | `string`                                                                |    | Name of a [React-Spectrum workflow icon](https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html#available-icons) |
+| onClick  | `callback(): void`                                                      |  ✔️ | A callback for a button `onClick` event                                                                      |
+
diff --git a/src/pages/services/aem-universal-editor/api/index.md b/src/pages/services/aem-universal-editor/api/index.md
@@ -11,6 +11,18 @@ This section covers the utilization of existing extension points, extension regi
 
 <DiscoverBlock slots="link, text"/>
 
+[Common Concepts in Creating Extensions](commons)
+
+Learn about common concepts, extension registration, and methods that can be used in any extension
+
+<DiscoverBlock slots="link, text"/>
+
+[Header Menu](header-menu)
+
+Explore the ways to extend and customize Header Menu
+
+<DiscoverBlock slots="link, text"/>
+
 [Modal Dialogs](modal)
 
 Learn about modal host API methods that can be used in any extension