Ctrlk

Cloud Heartcore Marketplace

Menu

Create menus that appear throughout the backoffice, including in sidebars and button flyouts.

Menu extensions contain one or more menu item extensions and can appear throughout the backoffice, such as in sidebars and flyouts.

Menu extensions can be created using either JSON or TypeScript. Both approaches are shown below.

umbraco-package.json

{
    "$schema": "../../umbraco-package-schema.json",
    "name": "My Package",
    "version": "0.1.0",
    "extensions": [
        {
            "type": "menu",
            "alias": "My.Menu",
            "name": "My Menu"
        }
    ]
}

Extension authors define the menu manifest, then register it dynamically/during runtime using a Backoffice Entry Point extension.

my-menu/manifests.ts

import type { ManifestMenu } from '@umbraco-cms/backoffice/menu';

export const menuManifest: ManifestMenu = {
    type: 'menu',
    alias: 'My.Menu',
    name: 'My Menu'
};

entrypoints/entrypoints.ts

import type {
    UmbEntryPointOnInit,
} from "@umbraco-cms/backoffice/extension-api";
import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry";
import { menuManifest } from "./../my-menu/manifests.ts";

export const onInit: UmbEntryPointOnInit = (_host, _extensionRegistry) => {
    console.log("Hello from my extension 🎉");

    umbExtensionsRegistry.register(menuManifest);
};

See Also

Section Sidebar for information on creating menus for navigation within section extensions.
Menu Item for information on creating menu items.

PreviousLocalization NextMenu Item

Last updated 2 days ago

Was this helpful?