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 of buttons from React Spectrum;
• use any icon from React Spectrum;

Custom button with callback

Copy
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.');
                        },
                    },
                ];
            },
        },
    },
});
Copied to your clipboard
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.

Custom button with sub menu

Copy
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 () => {
                                    // ...
                                },
                            },
                        ],
                    },
                ];
            },
        },
    },
});
Copied to your clipboard
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 () => {
                                    // ...
                                },
                            },
                        ],
                    },
                ];
            },
        },
    },
});

API Reference

Button API

Sub menu item API

Last updated 4/26/2024

Was this helpful?

Yes

No