Header Menu

The Header Menu is an area above the content fragments list in the Content Fragments Console that displays action items unrelated to any particular content fragment. It includes buttons or links for common actions such as creating new content fragments, importing content fragments, and performing other operations that are not tied to a specific content fragment.

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;
• delete default or added by extension buttons;

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: {
            getButtons() {
                return [
                    {
                        id: "my.company.export-button",
                        label: "Export",
                        icon: 'Export',
                        subItems: [
                            {
                                id: 'xml',
                                label: 'XML',
                                onClick: async () => {
                                    console.log('Export in XML button has been pressed.');
                                    // ...
                                },
                            },
                            {
                                id: 'csv',
                                label: 'CSV',
                                onClick: async () => {
                                    console.log('Export in CSV 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',
                        subItems: [
                            {
                                id: 'xml',
                                label: 'XML',
                                onClick: async () => {
                                    console.log('Export in XML button has been pressed.');
                                    // ...
                                },
                            },
                            {
                                id: 'csv',
                                label: 'CSV',
                                onClick: async () => {
                                    console.log('Export in CSV button has been pressed.');
                                    // ...
                                },
                            },
                        ],
                    },
                ];
            },
        },
    },
});

The onClick callback is invoked when a user clicks on the button. It does not receive any arguments.

Delete button

Copy
import { register } from "@adobe/uix-guest";

// ...

const guestConnection = await register({
    id: "my.company.extension-with-header-menu-button",
    methods: {
        headerMenu: {
            deleteButtons() {
                return [
                    {
                        id: "my.company.export-button"
                    },
                ];
            },
        },
    },
});
Copied to your clipboard
import { register } from "@adobe/uix-guest";

// ...

const guestConnection = await register({
    id: "my.company.extension-with-header-menu-button",
    methods: {
        headerMenu: {
            deleteButtons() {
                return [
                    {
                        id: "my.company.export-button"
                    },
                ];
            },
        },
    },
});

API Reference

Button API

Sub menu item API

Delete button API

Last updated 11/21/2023

Was this helpful?

Yes

No