Header Apps
Example how to work with extension registry
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
A header app appears next to the user profile and global search icon on the top-right corner of Umbraco's backoffice.
In this article, you can find an example of an extension registry. This example details the creation of a Header App in two ways, similar to how the extension registry can be created:
Button Header App with Manifest
Below you can find an example of how to setup a Header App using the manifest file.
Follow the Vite Package Setup to create a header app and name it "
header-app
" when using the guide.Create a manifest file named
umbraco-package.json
at the root of theheader-app
folder. Here we define and configure our dashboard.Add the following code to
umbraco-package.json
:
{
"$schema": "../../umbraco-package-schema.json",
"name": "My Header App",
"version": "0.1.0",
"extensions": [
{
"type": "headerApp",
"alias": "My.HeaderApp",
"name": "My Header App",
"kind": "button",
"meta": {
"label": "Hello Umbraco",
"icon": "icon-hearts",
"href": "https://umbraco.com/"
}
}
]
}
First we define the type which is a
headerApp
. Then we add a unique alias and a name to define the extension UI.Then we can define what kind of extension it is, where in this case we can use a pre-defined element called button.
The button requires some metdata: an icon, label of the button (name of the button) and a link which opens once clicked.
In the
header-app
folder runnpm run build
and then run the project. Then in the backoffice you will see our new Header App extension with heart icon:

Button Header App with JS/TS
Below you can find an example of how to setup a Header App using the TypeScript file.
This is a continuation of the above steps from the Button Header App with Manifest example. We will register a new Header App directly from the .ts file.
Add a reference to the .js file. Update the
umbraco-package.json
with the following:
{
"$schema": "../../umbraco-package-schema.json",
"name": "My Header App",
"version": "0.1.0",
"extensions": [
{
"type": "headerApp",
"alias": "My.HeaderApp",
"name": "My Header App",
"kind": "button",
"element": "/App_Plugins/header-app/dist/header-app.js",
"meta": {
"label": "Hello Umbraco",
"icon": "icon-hearts",
"href": "https://umbraco.com/"
}
}
]
}
Replace the content of the
src/my-element.ts file
with the following:
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
const manifest: UmbExtensionManifest = {
type: "headerApp",
alias: "My.HeaderApp.Documentation",
name: "My Header App Documentation",
kind: "button",
meta: {
label: "Hello Documentation",
icon: "icon-addressbook",
href: "https://docs.umbraco.com/"
}
};
umbExtensionsRegistry.register(manifest);
In the
header-app
folder runnpm run build
and then run the project. Then in the backoffice you will see our new Header App extension with address book icon:

Last updated
Was this helpful?