Header Apps
Example how to work with extension registry
Last updated
Was this helpful?
Example how to work with extension registry
Last updated
Was this helpful?
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:
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 the header-app folder. Here we define and configure our dashboard.
Add the following code to umbraco-package.json:
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 run npm run build and then run the project. Then in the backoffice you will see our new Header App extension with heart icon:
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:
Replace the content of the src/my-element.ts file with the following:
In the header-app folder run npm run build and then run the project. Then in the backoffice you will see our new Header App extension with address book icon:
